Question

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

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');。这两个函数同时发生，因为它们都在父容器组件下呈现。

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

编辑：澄清问题所在。

Answer 1

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的简单灵感。

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

1 个答案: