Question

在Redux中将多个状态与相应的动作创建者连接的正确方法是什么？这是一个好主意吗？如果这是一个愚蠢的想法，我该如何解决这个问题？

export default connect(

// which part of the Redux global state does
// our component want to receive as props?
(state) => {
  return {
    state: state.instagram
  };
},

// which action creators does
// it want to receive by props?
(dispatch) => {
  return {
    actions: bindActionCreators(instagramActions, dispatch)
  };
}

)(FeedContainer);

我基本上想要的是这样的：

...
state: {state.instagram, state.facebook}
...

...
const mergedActions = {instagramActions, facebookActions};
actions: bindActionCreators(mergedActions , dispatch)
...

Answer 1

使用提供的回调mapStateTopProps和mapDispatchToProps是将组件与状态和已绑定的actionCreator的已过滤子集连接的正确方法。

为了达到你想要的目的，你可以做到：

(state) => {
  const { instagram, facebook } = state;
  return {
    state: { instagram, facebook }
  };
}

和

(dispatch) => {
  return {
     actions: bindActionCreators(Object.assign({}, instagramActions, facebookActions), dispatch)
  };
}

这不起作用：

actions: bindActionCreators({instagramActions, facebookActions} , dispatch)

因为该方法尚不支持嵌套对象。 See code here。它只迭代键并查找函数。

在mapDispatchToProps回调中，您可以将额外的状态层留下

(state) => {
   const { instagram, facebook } = state;
   return {
      instagram, 
      facebook
   };
}

通过这样做，您可以使用以下方式访问道具：

this.props.facebook和this.props.instagram代替 this.props.state.facebook和this.props.state.instagram。但这只是我认为的风格问题。

有几种方法可以将州和派遣绑定到道具。最后，这是一个风格问题。我可以提供几个不同的如何做的例子，但最好看看官方文档并找到自己的风格https://github.com/reactjs/react-redux/blob/master/docs/api.md

Answer 2

或者您可以简单地做到这一点：

import * as todoActionCreators from './todoActionCreators'
import * as counterActionCreators from './counterActionCreators'
import { bindActionCreators } from 'redux'

function mapStateToProps(state) {
  return { todos: state.todos }
}

function mapDispatchToProps(dispatch) {
  return {
    todoActions: bindActionCreators(todoActionCreators, dispatch),
    counterActions: bindActionCreators(counterActionCreators, dispatch)
  }
}

如react-redux文档所示

Answer 3

我知道这是一个老问题，但是如果有人想将所有动作映射到this.props中的单个键中（像我一样），我在这里加两分钱。

扩展DavinTryon对已接受答案的评论，另一种实现“ mergedActions”的方法是使用传播运算符，特别是如果您想对所有操作使用一个键（例如actions）并使用this.props.actions.[specificAction]对其进行呼叫。这是您在connect方法中要做的事情：

export default connect(
(state) => {
  return {
    state: state.instagram
  };
},

(dispatch) => {
  return {
    actions: bindActionCreators({...instagramActions, facebookActions}, dispatch)
  };
}

)(FeedContainer);

如果要分别声明方法（使用mapDispatchToProps和mapStateToProps之类的方法，则可以如下编写mapDispatchToProps：

const mapDispatchToProps = dispatch => {
  return {
    actions: bindActionCreators({ ...instagramActions, facebookActions }, dispatch)
  };
};

这会将您在facebookActions和instagramActions中的所有动作创建者都映射到this.props.actions。

Redux connect（）具有多个动作/状态

3 个答案: