为多种网络编写单个Reducer

我写了2个类的组件，并且使用了一个简单的reducer，供两个组件使用mapStateToProps。为多种网络编写单个Reducer

组分A减速器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;

减速器看起来像这样：

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; 
    } 
}

的问题是，当一个构成元素甲分派一个动作，它影响组件B的状态，反过来。

这不是我正在寻找的行为。我希望组件将使用相同的逻辑，但将保存不同的“状态属性”。不同的“通知”实例。

是否有可能，还是我必须复制减速机？

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

来源

2017-04-03 Chen

通过为每个组件提供一个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与组件的每个实例相关联，否则您可以在构造函数中生成一个随机的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如果您愿意。

来源

2017-04-03 13:55:24

感谢您的回答，但实际上是不工作。它的状态仍然在两个组件中都得到更新（所以在分派动作之后，它们也保持相同的ID）。还，如果之前我想通知是用于显示消息的简单的字符串的状态，现在是用ID作为键和字符串值的对象，这不是声明，并很奇怪。我会阅读更多关于它..感谢 – Chen

仅仅因为数据稍微复杂并不意味着它不再声明。它可能不像你想要的那么简单，但是将数据封装在带有ID的对象中并不奇怪。 –

你完全正确 - 这种方法有很多优点。但我希望国家保持简单 - 只是一个简单的字符串。我正在努力使这个观点成为国家的镜子。并通知的消息应该是..只是一个字符串。其实我解决它使用定制的高位降低： http://redux.js.org/docs/recipes/reducers/ReusingReducerLogic.html 所以现在我可以针对国家的特定区域，无需增加额外的标识符它（在实际的商店层面） – Chen

最终与高阶减速器去接近：

You can read about it here

进口*从” ../../类型../动作/ 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;

所以现在的状态的结构是一样的，如动作创作者照顾方向行为。

来源

2017-04-04 09:27:45 Chen

为多种网络编写单个Reducer

回答

相关问题