1. ホーム
  2. reactjs

[解決済み] react/reduxでbindActionCreatorsを使用するのはどんなときか?

2023-01-19 22:21:54

質問

再利用 のドキュメント bindActionCreators にはこう書かれています。

の唯一のユースケースは bindActionCreators を使うのは、Reduxを意識していないコンポーネントにアクションクリエータを渡したいときで、ディスパッチやReduxストアを渡したくはありません。

どのような例かというと bindActionCreators が使用される/必要とされる例は何でしょうか?

どのようなコンポーネントが Redux ?

両者のメリット/デメリットは何ですか?

//actionCreator
import * as actionCreators from './actionCreators'

function mapStateToProps(state) {
  return {
    posts: state.posts,
    comments: state.comments
  }
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators(actionCreators, dispatch)
}

function mapStateToProps(state) {
  return {
    posts: state.posts,
    comments: state.comments
  }
}

function mapDispatchToProps(dispatch) {
  return {
    someCallback: (postId, index) => {
      dispatch({
        type: 'REMOVE_COMMENT',
        postId,
        index
      })
    }
  }
}

どのように解決するのですか?

最も一般的な回答が、実際にその質問に対応しているとは思えません。

以下のすべての例は本質的に同じことを行い、ノー"プリバインディング"の概念に従います。

// option 1
const mapDispatchToProps = (dispatch) => ({
  action: () => dispatch(action())
})


// option 2
const mapDispatchToProps = (dispatch) => ({
  action: bindActionCreators(action, dispatch)
})


// option 3
const mapDispatchToProps = {
  action: action
}

オプション #3 は単なるオプションの省略形です #1 の省略形にすぎません。 #1 とオプション #2 . react-reduxのコードベースでは両方が使われているのを見たことがありますが、どちらかというと混乱しやすいと思います。

私は、この混乱は、すべての の例 react-redux doc では bindActionCreators であるのに対し bindActionCreators (のドキュメントには、react-reduxで使用しないようにと書かれています。

答えはコードベースにおける一貫性だと思いますが、個人的にはアクションを明示的に ディスパッチ でラップすることを好みます。