Question

我编写了2个类组件，并使用mapStateToProps两个组件使用了一个reducer。

组件A reducer def：

import notify from '../global/reducers/notifyReducer';

const compAReducer = combineReducers({
    notify
});

export default compAReducer;

组分B还原剂def：

import notify from  '../global/reducers/notifyReducer';

const compBReducer = combineReducers({
    notify
});

export default compBReducer;

reducer看起来像这样：

import * as types from '../../../actions/actionTypes';

export default function notifyReducer(state = {}, action) {
    switch (action.type) {
        case types.NOTIFY_SUCCESS:
        case types.NOTIFY_FAILURE:
            return action.notify;
        case types.NOTIFY_NULL:
            return {};
        default:
            return state;
    }
}

问题是当一个组件A调度一个动作时，它会影响组件B的状态，副verca。

这不是我正在寻找的行为。我希望该组件将使用相同的逻辑，但将保持不同的状态属性＆＃34;。一个不同的＆＃34;通知＆＃34;实例

是否可能，或者我是否必须复制减速器？

非常感谢。我还在学习React-Redux。

Answer 1

您可以通过为每个组件提供ID来命名您的状态。

export function notifyReducer(state = {}, action) {
  switch (action.type) {
        case types.NOTIFY_SUCCESS:
        case types.NOTIFY_FAILURE:
            return { ...state, [action.id]: action.notify };
        case types.NOTIFY_NULL:
            return { ...state, [action.id]: {} };
        default:
            return state;
    }
}

然后，您需要做的就是确保您的组件包含id属性及其分派的每个操作。

根据您的应用程序，可能已经存在与组件的每个实例关联的逻辑ID，否则您可以在构造函数中生成随机的。

import uid from 'uid';

constructor() {
  super(this);
  this.id = uid();
}

然后，您的每个动作创建者都应接受id作为参数。

function notifyFailure(id, notify) {
  return { id, type: types.NOTIFY_FAILURE, notify }
}

最后，您需要在mapDispatchToProps时传递ID。

function mapDispatchToProps(dispatch) {
  return {
    notifyFailure(id, notify) {
      dispatch(notifyFailure(id, notify));
    }
  }
}

如果您愿意，可以使用bindActionCreators。

Answer 2

最终采用了高阶减速器方法：

You can read about it here

从'../../../ actions / actionTypes'中导入*作为类型;

export default function createNotifyReducerWithPageType(pageType = '') {
    return function notifyReducer(state = '', action) {
        switch (action.type) {
            case types.NOTIFY_SUCCESS + `_${pageType}`:
            case types.NOTIFY_FAILURE + `_${pageType}`:
                return action.notify;
            case types.NOTIFY_NULL:
                return {};
            default:
                return state;
        }
    }
}

动作创作者：

export function notifySuccess(notify, type) {
    return {
        type: types.NOTIFY_SUCCESS + type,
        notify
    }
}

export function notifyFailure(notify, type) {
    return {
        type: types.NOTIFY_FAILURE + type,
        notify
    }
}

减速器：

import createNotifyReducerWithPageType from '../global/reducers/notifyReducer';

const compA = combineReducers({
    notify: createNotifyReducerWithPageType('_compA')
});

export default compA;

和第二个：

import createNotifyReducerWithPageType from '../global/reducers/notifyReducer';

const compB = combineReducers({
    notify: createNotifyReducerWithPageType('_compB')
});

export default compB;

所以现在各州的结构是相同的，因为行动创造者负责指导行为。

为多个Componenets编写单个Reducer

2 个答案: