JavaScript/Redux
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
検索
|
最終更新
|
ヘルプ
|
ログイン
]
開始行:
-よくわからん
#contents
*各機能の役割 [#x14d3cd9]
|Action|単純なオブジェクト|
|Reducer|Actionの結果をもとにstateを更新（新しいstateに置...
|State|stateをpropに渡して、コンポーネント描写|
|Store|アプリで唯一全てのstateを包括する。これを変えるに...
*勉強 [#k7e10f35]
https://qiita.com/tomzoh/items/7fabe7cb57dd96425867
https://qiita.com/takayuki-ochiai/items/d2fd896627ecf0b46...
https://qiita.com/jabba/items/5ebea8d19809a4e0f8c6
https://super-yusuke.gitbook.io/udemy-course/meteno-react...
*github [#l89f3cb8]
https://github.com/reduxjs/redux/
https://github.com/react-samples/react-redux-tutorial
https://github.com/teradonburi/muiReduxForm
*よく使うJSの構文 [#qf0dd58b]
スプレッド演算子、filter,map
**関数の省略 [#acb58cea]
const middlware = function ({getState, dispatch}) {
return function(next) {
return function(action) {
next(action)
}
}
}
これが
const myMiddlware = ({ getState, dispatch }) => next => ...
next(action)
};
*構成要素 [#wd0f6ca8]
|Store|状態の親玉。でっかいJSONイメージ。subscribeメソッ...
|Action|名前であるTYPEと中身データのpayloadを持つ。Store...
|ActionCreator|Actionオブジェクトを返す関数|
|Reducer|以前の状態とActionを組み合わせて、新しいStateを...
|Router|パスとコンポーネントを結びつける|
Router(パスへの追加)→connectでつないだコンポーネント→
*mapStateToProps mapDespatchToProps [#h361a76c]
reduxのstateをreactのpropsに変換するのと、Actionもpropsに...
第一引数が、stateToPropで第二引数がActionToPropである。繋...
|mapStateToProps|stateを引数にとってオブジェクトを返す|
|mapDespatchToProps|dispatchを引数にとって、dispatchする...
const { testFunction,todos } = props
testFuctionでアクションを呼べる。上の宣言なしだとthis.pr...
todosでpropsを呼べる。this.props.todos
**シンプルに記載 [#a8fdd028]
import { connect } from 'react-redux'
import MyComponent from './my-component'
import { actionCreatorA, actionCreatorB } from './my-mod...
export default connect(
({users, todos}) => ({users, todos}),
{
actionCreatorA,
actionCreatorB
}
)(MyComponent)
**Action [#i9b2fd0a]
**Reducer [#j1c94a95]
--「Reducer」は状態とアクションを受けて、新しい状態を返す...
--FLUXとの相違点はReduxにはdispatcherがない。(Reducerで担...
**State [#b7f70bec]
*ツール [#baf48dcb]
react developer tools(ReactのページでElementタブの右端に...
*参考サイト [#w96305db]
http://numb86-tech.hatenablog.com/entry/2016/11/20/124316
https://blog.mismithportfolio.com/web/20161107reactrouter
*その他 [#ud04f5d5]
-axios Promise(thenで成功、失敗処理を記載）対応のHTTPクラ...
-babel トランスパイラ
-express
-react-router-redux
-redux-actions
#counter
終了行:
-よくわからん
#contents
*各機能の役割 [#x14d3cd9]
|Action|単純なオブジェクト|
|Reducer|Actionの結果をもとにstateを更新（新しいstateに置...
|State|stateをpropに渡して、コンポーネント描写|
|Store|アプリで唯一全てのstateを包括する。これを変えるに...
*勉強 [#k7e10f35]
https://qiita.com/tomzoh/items/7fabe7cb57dd96425867
https://qiita.com/takayuki-ochiai/items/d2fd896627ecf0b46...
https://qiita.com/jabba/items/5ebea8d19809a4e0f8c6
https://super-yusuke.gitbook.io/udemy-course/meteno-react...
*github [#l89f3cb8]
https://github.com/reduxjs/redux/
https://github.com/react-samples/react-redux-tutorial
https://github.com/teradonburi/muiReduxForm
*よく使うJSの構文 [#qf0dd58b]
スプレッド演算子、filter,map
**関数の省略 [#acb58cea]
const middlware = function ({getState, dispatch}) {
return function(next) {
return function(action) {
next(action)
}
}
}
これが
const myMiddlware = ({ getState, dispatch }) => next => ...
next(action)
};
*構成要素 [#wd0f6ca8]
|Store|状態の親玉。でっかいJSONイメージ。subscribeメソッ...
|Action|名前であるTYPEと中身データのpayloadを持つ。Store...
|ActionCreator|Actionオブジェクトを返す関数|
|Reducer|以前の状態とActionを組み合わせて、新しいStateを...
|Router|パスとコンポーネントを結びつける|
Router(パスへの追加)→connectでつないだコンポーネント→
*mapStateToProps mapDespatchToProps [#h361a76c]
reduxのstateをreactのpropsに変換するのと、Actionもpropsに...
第一引数が、stateToPropで第二引数がActionToPropである。繋...
|mapStateToProps|stateを引数にとってオブジェクトを返す|
|mapDespatchToProps|dispatchを引数にとって、dispatchする...
const { testFunction,todos } = props
testFuctionでアクションを呼べる。上の宣言なしだとthis.pr...
todosでpropsを呼べる。this.props.todos
**シンプルに記載 [#a8fdd028]
import { connect } from 'react-redux'
import MyComponent from './my-component'
import { actionCreatorA, actionCreatorB } from './my-mod...
export default connect(
({users, todos}) => ({users, todos}),
{
actionCreatorA,
actionCreatorB
}
)(MyComponent)
**Action [#i9b2fd0a]
**Reducer [#j1c94a95]
--「Reducer」は状態とアクションを受けて、新しい状態を返す...
--FLUXとの相違点はReduxにはdispatcherがない。(Reducerで担...
**State [#b7f70bec]
*ツール [#baf48dcb]
react developer tools(ReactのページでElementタブの右端に...
*参考サイト [#w96305db]
http://numb86-tech.hatenablog.com/entry/2016/11/20/124316
https://blog.mismithportfolio.com/web/20161107reactrouter
*その他 [#ud04f5d5]
-axios Promise(thenで成功、失敗処理を記載）対応のHTTPクラ...
-babel トランスパイラ
-express
-react-router-redux
-redux-actions
#counter
ページ名:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
