Redux connect()具有多个动作/状态

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是您的组件与你的状态的过滤子集,并已绑定actionCreators连接的正确方法.

为了达到你想要的目的,你可以简单地做到:

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

和

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

这不起作用:

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

因为该方法尚不支持嵌套对象.见这里的代码.它只迭代键并查找函数.

在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