React-Reduxの使い方 (ReactとReduxの接続)

個人的なメモも兼ねて。

src/index.jsでやること

1. createStoreのメソッドをReduxからimportする。

STOREを作成するためのメソッド。
引数にreducerを指定する(後述)。

src/index.js

import { createStore } from 'redux';

2. Providerコンポーネントをimport

ReduxをReactで使用するためのMWであるreact-reduxから、Reactプロジェクトで使用することのできるProviderコンポーネントをimportし、設置する。

Providerコンポーネントって何？

React Reduxの公式ドキュメントにもあるように、Providerコンポーネントにネストされている範囲だけが、react-reduxの機能の一つであるconnect()でconnectされたコンポーネントを扱えるようになるらしい。

Normally, you can’t use a connected component unless it is nested inside of a<Provider>.

Providerコンポーネントはstoreと言うpropsのみ受け付けている。文字通りこのpropsにはcreateStore()で作成したSTOREを渡す。

src/index.js

import { Provider } from 'react-redux';

~~~~~中略~~~~~

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}> 
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

3. STOREに渡すためのREDUCERをimport

REDUCERは他のファイルで定義しておく。
よく見かけるのはsrc/reducersディレクトリを切ってその中に目的別のreducerファイルを作成していく手法。

複数のファイルにまたがるREDUCERを一つにまとめてsrc/index.jsでSTOREに渡す方法は以下を参照。
Reactアプリ内でのReduxの複数のReducerを一つにまとめる方法 - Qiita

REDUCERをまとめてimport

import rootReducers from "./reducers"; // 指定がない場合はwebpackがデフォルトでindex.jsというファイルを指定してくれる

Reduxを使用するときにやること

ReactとReduxの接続 connect()

登場人物たち

• mapStateToProps :STOREが持っているstateをpropsに入れて子コンポーネントへ渡す。
• mapDispatchToProps :DISPATCHを呼び出す関数をpropsに入れて子コンポーネントへ渡す。

mapStateToPropsについて

const mapStateToProps = (state) => { // Issueコンポーネント内で使用するstateを限定する役目
  return {
    // stateオブジェクトから指定できるのは、src/reducers/index.js でrootReducerにまとめたときのオブジェクトのkey名
    // key名がコンポーネントで受け取るpropsの名前になる
    // なので、子コンポーネントでは「issue」という名前で参照可能。
    issue: state.issue.data,
  };
}

mapDispatchToPropsについて

/*
子コンポーネントからdispatchするときに、わざわざ `dispatch(actionCreator(追加したい要素))`しなくても、
この場合だと `addContents(追加したい要素)` でstoreにdispatchできるようになる。
*/
const mapDispatchToProps = dispatch => {
  return {
    addIssue: (payload) => {
      dispatch(actions.addIssue(payload));
    },
  }
}

connect()の書き方

connect()の書き方

const ContainerInMiddle = connect(
  mapStateToProps,
  mapDispatchToProps
)(ChildComponent);

Container Components(reduxと接続したreactのコンポーネント)のコード例

import * as actions from '../actions';
import { connect } from 'react-redux';
import IssueContents from '../components/organisms/IssueContents';

const mapStateToProps = (state) => { // Issueコンポーネント内で使用するstateを限定する役目
  return {
    // stateオブジェクトから指定できるのは、src/reducers/index.js でrootReducerにまとめたときのオブジェクトのkey名
    // key名がコンポーネントで受け取るpropsの名前になる
    // なので、子コンポーネントでは「issue」という名前で参照可能。
    issue: state.issue.data,
  };
}

/*
  子コンポーネントからdispatchするときに、わざわざ `dispatch(actionCreator(追加したい要素))`しなくても、
  この場合だと `addContents(追加したい要素)` でstoreにdispatchできるようになる。
*/
const mapDispatchToProps = dispatch => {
  return {
    addIssue: (payload) => {
      dispatch(actions.addIssue(payload));
    },
  }
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(IssueContents);

参考

▷Reduxのconnectについて
▷Basic Tutorial | React Redux
▷ReactとReduxで管理するstateの分け方｜Playground発！アプリ開発会社の技術ブログ