LoginSignup
3

More than 3 years have passed since last update.

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

Last updated at Posted at 2021-01-23

個人的なメモも兼ねて。

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.jsSTOREに渡す方法は以下を参照。
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発!アプリ開発会社の技術ブログ

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3