mapStateToProps 和不是来自商店的属性

Question

在 mapStateToProps 中包含不是来自商店的属性是个好主意吗？

例如

const fooBar = () => 'foobar!'

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

Answer 1

是的，这是一个可以接受的用例 - 但是，我们可以更简洁地实现此功能。例如，react-redux 中的 mapStateToProps 接受第二个参数，标题为 ownProps，这是传递给相关容器组件的 props：

通过https://github.com/reactjs/react-redux/blob/master/docs/api.md

[mapStateToProps(state, [ownProps]): stateProps] (Function): ...If ownProps is specified as a second argument, its value will be the props passed to your component, and mapStateToProps will be re-invoked whenever the component receives new props.

因此，与其在容器组件内部实例化 fooBar，不如将其作为 prop 传递给组件本身，然后通过 ownProps 访问它？

一些其他组件

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

我的容器

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

mapStateToProps 和不是来自商店的属性

mapStateToProps and properties not coming from the stores

reactjs

redux

react-redux