带有多个操作/状态的Redux connect()

umuewwlo  于 2023-08-05  发布在  其他
关注(0)|答案(3)|浏览(86)

在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)
...

pgx2nnw8

pgx2nnw81#

使用提供的回调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)


因为该方法还不支持嵌套对象。See code here。它只遍历键并查找函数。
在mapDispatchToProps回调中,您可以不使用额外的状态层

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


通过这样做,您可以通过以下方式访问 prop :
this.props.facebookthis.props.instagram,而不是this.props.state.facebookthis.props.state.instagram。但我认为这只是风格的问题。
有几种方法可以将状态和分派绑定到 prop 。归根结底,这是一个风格问题。我可以提供几个不同的示例来说明如何实现它,但是最好还是查看一下官方文档并找到您自己的样式https://github.com/reactjs/react-redux/blob/master/docs/api.md

llmtgqce

llmtgqce2#

或者你可以简单地这样做:

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文档所示

2q5ifsrm

2q5ifsrm3#

我知道这是一个老问题,但如果其他人想将所有操作Map到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);

字符串
如果你是单独声明这些方法的(比如mapDispatchToPropsmapStateToProps),你可以这样写mapDispatchToProps

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


这将把facebookActionsinstagramActions中的所有动作创建器Map到this.props.actions

相关问题