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

Question

我有一个包含两个 "smart" 组件的页面：

PageChildrenTabs
静态页面

我有一个动作函数：

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 来执行两个相似的操作？

React Redux how to use one reducer for two similar actions in two different components?

reactjs

redux

react-redux