React Redux如何在两个不同的组件中使用一个reducer进行两个类似的操作?

时间:2016-10-20 00:03:33

标签: reactjs redux react-redux

我有一个包含两个“智能”组件的页面:

  • PageChildrenTabs
  • StaticPage

我有一个动作功能:

function fetchPage(slug) {
     return {
         type: 'FETCH_PAGE',
         payload: axios.get(PAGE_ENDPOINT + slug);
     }
}

我有一个减速器:

export function pageReducer(state={
    pending: false,
    payload: {data: {}},
    error: null
}, action) {
    switch(action.type) {
        case "FETCH_PAGE_PENDING": {
            return {...state, pending: true, payload: {data: {}}, error: null};
        }
        case "FETCH_PAGE_FULFILLED": {
            return {...state, pending: false, payload: action.payload, error: null};
        }
        case "FETCH_PAGE_REJECTED": {
            return {...state, pending: false, payload: {data: {}}, error: action.payload};
        }
    }
    return state;
}

PageChildrenTabs调用this.props.fetchPage('about');,而StaticPage调用this.props.fetchPage('about/history');。这两个函数同时发生,因为它们都在父容器组件下呈现。

现在,这是我的问题。两个组件中仅显示一个操作响应的数据。我理解这可能是因为一个人移除了另一个。实现我想要实现的目标的正确方法是什么?如何使用单个减速器同时在两个单独的组件中加载相同的动作两次?

编辑:澄清问题所在。

1 个答案:

答案 0 :(得分:2)

Redux状态将整个应用程序中的所有内容存储在一棵树中。如果你需要存储多个东西,你只需要制作数组或哈希。在这种情况下,您可能希望通过slug存储此数据。

行动创作者:

function fetchPage(slug) {
     return {
         type: 'FETCH_PAGE',
         slug,
         payload: axios.get(PAGE_ENDPOINT + slug);
     }
}

减速机:

function singlePageReducer(state={
    pending: false,
    payload: {data: {}},
    error: null
}, action) {
    switch(action.type) {
        case "FETCH_PAGE_PENDING": {
            return {...state, pending: true, payload: {data: {}}, error: null};
        }
        case "FETCH_PAGE_FULFILLED": {
            return {...state, pending: false, payload: action.payload, error: null};
        }
        case "FETCH_PAGE_REJECTED": {
            return {...state, pending: false, payload: {data: {}}, error: action.payload};
        }
    }
    return state;
}

export function pageReducer (state = {}, action) {
  if (["FETCH_PAGE_PENDING", "FETCH_PAGE_FULFILLED", "FETCH_PAGE_REJECTED"].indexOf(action.type) !== -1) {
    return { ...state,  [action.slug]: singlePageReducer(state[action.slug], action) };
  }
  return state; 
}

您可以将多个Reducer组合在一起制作数据交响乐。看看todos example的简单灵感。