ストアの作成手順
まずは、「src/store.js」など適当な場所にReduxストアのファイルを作成します。
Reducerを呼び出す。
ReducerはStore内部に存在する概念ですが、storeとは別ファイルに作成することが一般的です。
|
1 |
import reducers from './reducers'; |
createStoreを読み込む
reducersを引数としてcreateStoreを実行することでStoreを作成することが可能です。
|
1 2 |
import { createStore } from 'redux'; const store = createStore(reducers); |
Storeを外部から呼び出せるようにする。
|
1 |
export default store; |
Reactからストアを呼び出す。
ここからはReact側の「src/index.js」を編集します。
ProviderにStoreをセットする。
下記のように、React側からStoreの中のデータを使うためにreact-reduxのProviderを使います。
|
1 |
import { Provider } from "react-redux"; |
下記のようにAppをProviderの子要素とします。（これで子要素のコンポーネントからStoreの情報にアクセスできるようになります。）
|
1 2 3 4 5 6 |
ReactDOM.render( <Provider store={store}> <App /> </Provider>, document.getElementById('root') ); |
個別のコンポーネントからストアを呼び出す。
例えば、App.jsから呼び出すとします。
connectを追加する。
react-reduxのconnectを使います。
|
1 |
import { connect } from "react-redux"; |
Appをexportしていたのをconnectをexportするようにします。
変更前
|
1 |
export default App; |
変更後
Appを引数とします。
|
1 |
export default connect()(App); |
mapStateToPropsと言う関数を追加してconnectの引数に渡す。
mapStateToProps
下記のような関数をApp.js内に用意します。
|
1 2 3 4 5 |
const mapStateToProps = state => { return { test: state.test.value } }; |
mapStateToPropsの特徴
- ただ一つのオブジェクトを返す関数
- stateと言う引数には自動的に現在のStoreの中身が与えられます。
- stateの中身を個別コンポーネントのpropsに渡してUI表示にデータを使うことが可能です。
- 上記例で言えば、Storeの「test」によってtestと言うpropsに渡しています。
export文を以下のようにする。
connectの引数に関数「mapStateToProps」を渡すことによって個別コンポーネントがStoreにアクセスできるようになります。
|
1 |
export default connect(mapStateToProps)(App); |
これでUI側(jsx)から「this.props.test」などでストアの値を取り出すことが可能です。
ReactからReduxのStoreの値に変化を加える。
Actionを入れた関数を呼び出せるようにする。
「src/action.js」などで宣言したActionCreator(Actionを返してくれる関数)をReactのコンポーネントから呼び出します。
|
1 |
import { aMethod, bMethod } from './actions'; |
this.props.dispatchを使ってActionをDispatchする。
コンポーネント内のみで利用するstate変数をコンストラクタで宣言します。
|
1 2 3 4 5 6 |
constructor() { super(); this.state = { input: "" }; } |
jsx内
|
1 2 3 4 5 6 7 8 9 10 |
render() { const { input } = this.state; return ( <div> <input type="text" onChange={e => this.setState({input: e.target.value})}/> <button onClick={()=> this.props.dispatch(aMethod(this.state.input))}> a </button> </div> ) |
「this.state.input」が入力欄の内容（onChange={e => this.setState({input: e.target.value})}でセットしている。）をAction（a）に渡し、さらにthis.props.dispatchに渡すことでActionをdispatchしています。これでコンポーネント側からStoreに働きかけることが可能になります。
コードの見通しをよくする。
mapDispatchToPropsと言う関数を作成します。以下の例で出てくる「aMethod」、「bMethod」はActionCreator(Actionを返してくれる関数)のことです。また、引数で渡しているtestはActionを生成する際に使用するpayload(引数）になります。
|
1 2 3 4 5 6 7 8 9 10 |
const mapDispatchToProps = dispatch => { return { onAMethod(test) { dispatch(aMethod(test)) }, onBMethod(test) { dispatch(bMethod(test)) } } }; |
次にconnectの第二引数に与えます。
|
1 |
export default connect(mapStateToProps, mapDispatchToProps)(App); |
こうすることでthis.propsの要素としてDispatchを行うための関数を与えることが可能になります。
修正前
|
1 |
<button onClick={()=> this.props.dispatch(aMethod(this.state.input))}> |
修正後
このように書き換えることが可能になります。
|
1 |
<button onClick={()=> this.props.onAMethod(this.state.input)}> |
この記事へのコメントはありません。