- 追加された行はこの色です。
- 削除された行はこの色です。
#author("2019-10-18T11:11:02+00:00","default:wikiadmin","wikiadmin")
-よくわからん
#contents
*各機能の役割 [#x14d3cd9]
|Action|単純なオブジェクト|
|Reducer|Actionの結果をもとにstateを更新（新しいstateに置き換え)|
|State|stateをpropに渡して、コンポーネント描写|
|Store|アプリで唯一全てのstateを包括する。これを変えるにはactionをdispatchする。大きくなってきたらreducer分割で対応せよ|
*勉強 [#k7e10f35]
https://qiita.com/tomzoh/items/7fabe7cb57dd96425867
https://qiita.com/takayuki-ochiai/items/d2fd896627ecf0b466be
https://qiita.com/jabba/items/5ebea8d19809a4e0f8c6
https://super-yusuke.gitbook.io/udemy-course/meteno-react-app/react-dearwosuru
*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 => action => {
next(action)
};
*構成要素 [#wd0f6ca8]
|Store|状態の親玉。でっかいJSONイメージ。subscribeメソッドを実装すると変更検知ができる。dispatchもstoreから行う|
|Action|名前であるTYPEと中身データのpayloadを持つ。Storeを変えたければActionをコールするところから始まる|
|ActionCreator|Actionオブジェクトを返す|
|Action|名前であるTYPEと中身データのpayloadを持つ。Storeを変えたければActionをコールするところから始まる。 以下のオブジェクトがAction { type : "HOGE_ACTION"}|
|ActionCreator|Actionオブジェクトを返す関数|
|Reducer|以前の状態とActionを組み合わせて、新しいStateを作り出す|
|Router|パスとコンポーネントを結びつける|
Router(パスへの追加)→connectでつないだコンポーネント→
*mapStateToProps mapDespatchToProps [#h361a76c]
reduxのstateをreactのpropsに変換するのと、Actionもpropsにマッピングする。
第一引数が、stateToPropで第二引数がActionToPropである。繋ぐのはconnect関数。
|mapStateToProps|stateを引数にとってオブジェクトを返す|
|mapDespatchToProps|dispatchを引数にとって、dispatchする複数の関数を返す|
const { testFunction,todos } = props
testFuctionでアクションを呼べる。上の宣言なしだとthis.props.testFunction
todosでpropsを呼べる。this.props.todos
**シンプルに記載 [#a8fdd028]
import { connect } from 'react-redux'
import MyComponent from './my-component'
import { actionCreatorA, actionCreatorB } from './my-module'
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]")
