reactjs - mapStateToProps とプロパティがストアからのものではない

Question

ストア以外のプロパティを に含めることは良い考えmapStateToPropsですか?

例えば

const fooBar = () => 'foobar!'

const mapStateToProps = (state) => {
  return {
    todos: getVisibleTodos(state.todos, state.visibilityFilter),
    fooBar
  }
}

Answer 1

はい、これは許容できる使用例ですが、この機能をもう少しきれいに実装できる可能性があります。たとえば、mapStateToPropsinは、問題のコンテナー コンポーネントに渡される props であるreact-redux、 titled という 2 番目の引数を受け入れます。ownProps

https://github.com/reactjs/react-redux/blob/master/docs/api.md経由

[mapStateToProps(state, [ownProps]): stateProps] (関数) : ...2 番目の引数として ownProps が指定されている場合、その値はコンポーネントに渡される props になり、コンポーネントが新しい props を受け取るたびに mapStateToProps が再度呼び出されます。

したがってfooBar、コンテナ コンポーネント内でインスタンス化するのではなく、それを prop としてコンポーネント自体に渡してから、 経由でアクセスしてみownPropsませんか?

その他のコンポーネント

 <MyContainer fooBar={() => alert('foobar!')}

マイコンテナ

const mapStateToProps = (state, ownProps) => {
  return {
    todos: getVisibleTodos(state.todos, state.visibilityFilter),
    fooBar: ownProps.fooBar
  }
}