react-redux中具有相同名称的多个操作

Question

我有来自不同包的动作，它们具有相同的名称，如下所示：

import { bindActionCreators } from 'redux';
import { setActiveLanguage } from 'react-localize-redux';
import * as actionCreators from '../actions/actionCreators';
import * as toggleActions from '../actions/toggleActions';
import {actions as rrfActions} from 'react-redux-form';

function mapDispatchToProps(dispatch) {
    return bindActionCreators(
      {
        ...actionCreators,
        ...toggleActions,
        setActiveLanguage,
        ...rrfActions
      },
      dispatch);
  }

export default mapDispatchToProps

因为toggleActions和rrfActions都有一个toggle操作，所以嵌套rrfActions可以做到这一点(?)来调用操作，但是我不能阻止reducers监听相同的TOGGLE操作类型。除了对所有连接的组件都没有通用的mapDispatchToProps之外，还有什么解决方法吗？

干杯!

Answer 1

通过redux的设计，相同的操作类型由相同的reducer侦听器提供服务。如果您希望不同的侦听器负责您的操作，则这些操作必须具有不同的类型。为什么你不想使用前缀/后缀？

MY_SIMPLE_ACTION
MY_SIMPLE_ACTION_AREA1
MY_SIMPLE_ACTION_AREA2

在action dispatcher中，您可以传递一个指定区域的附加参数：

export function onDoSomething(param1, param2, referer) {
  return dispatch({
    type: MY_SIMPLE_ACTION + (referer ? `_${referer}` : ''),
    payload: { param1, param2 }
  })
}

Answer 2

首先，命名操作常量的值

const TOGGLE = 'namespace/TOGGLE'

然后，如果你这样定义你的reducer

const TOGGLE = 'namespace/TOGGLE'

switch (action.type) {
    case TOGGLE:
        // do_stuff
}

属性action.type的计算结果必须精确到'namespace/TOGGLE'。

来自react-redux-form的TOGGLE操作的值不太可能包含您唯一的名称空间，对吧？

你的减速机现在是安全的。

资料来源

• https://itnext.io/namespacing-redux-action-type-constant-values-90b932eea43f
• https://jaketrent.com/post/namespace-redux-action-types/

Answer 3

我解决这个问题的方法是重命名操作：

import { bindActionCreators } from 'redux';
import { setActiveLanguage } from 'react-localize-redux';
import * as actionCreators from '../actions/actionCreators';
import * as toggleActions from '../actions/toggleActions';
import { actions as rrfActions } from 'react-redux-form';

let renamedActions = {};
Object.keys(rrfActions).map((v,k)=> {
  renamedActions['rrf' + v.replace(/\b\w/g, l => l.toUpperCase())] = rrfActions[v]
  // toggle -> rrfToggle
  return null;
})

function mapDispatchToProps(dispatch) {
  return bindActionCreators(
    {
      ...actionCreators,
      ...toggleActions,
      setActiveLanguage,
      ...renamedActions
    },
    dispatch);
}

export default mapDispatchToProps