React-redux交叉访问状态值

时间:2015-10-05 12:25:04

标签: reactjs redux redux-framework

过去两周我一直在使用redux,我遇到了一个问题,我想访问/更改另一个reducer的状态值。我怎样才能做到这一点?

例如:我有两个组件“ A-Component ”和“消息组件” 其中包含“ A-actions ”,“消息操作”和“ A-reducer ”,消息减少器'分别

当调用' A-Component '的动作时,它将调用相应的reducer函数,我需要更新 Message-reducer 状态值,该值将显示消息框

A-动作


    export function add(data) {
      return {
        types: [types.ONADD, types.ONADDSUCCESS, types.ONADDFAIL],
        payload: {
          response: api.add(data).then(response => response),
          data
        }
      };
    }

A-减速器


    export default createReducer(initialState, {
      [types.ONADD](state) {
        return {
          ...state,
          message: 'Updating Records'
        };
      }
     });

上面提到的消息状态值是消息减少器的状态值。我想从A-reducer更新消息状态值 它反过来更新消息组件。在redux中这可能吗?

我试过各种中间件但是失败了。

提前感谢!

2 个答案:

答案 0 :(得分:2)

我认为你正以错误的方式接近这一点。您应该尽可能地规范化数据,然后使用连接装饰器来组合UI所需的状态。例如,消息可以嵌套在朋友的节点下,但最好将它们放在自己的商店中,然后创建一个选择来自消息的消息的函数。基于关系的朋友。这为您免费提供聚合(您有3条未读消息)。看一下reselect以一种很好的(和缓存的)方式来做这件事。

编辑:

您可以编写调度多个操作的中间件:

export default (store) => (next) => (action) => {
   if(!action.types){
     return next(action);
   }

   action.types.forEach(type => {
     next({
       type,
       payload: action.payload
     })
   });
}

然后从Action Creator中调用它:

export function addMessage(message){
  return {
    types: ['ADD_MESSAGE', 'UPDATE_USER'],
    payload: message
  }
}

答案 1 :(得分:1)

如果您已在消息操作中有更新操作

我认为您可以在触发ONADDSUCCESS时直接调度更新操作。

// Message action
export function MessageUpdate (data) {
  return {
    type: ...,
    data,
  }
}
// A action
export function add(data) {
  return dispatch => {
    dispatch({
      type: types.ONADD
    });

    // code for your add event
    api.add(data).then( response => {
      (() => {
        dispatch(MessageUpdate(response));
        return dispatch({
          type: types.ONADDSUCCESS,
        })
      })()
    });
  }
}

希望能回答你的问题。