Javascript 为两个不同的组件创建两个操作和两个还原器以获取相同的数据是否可以接受？

我有两个组件在一个页面中一起呈现，两个组件接收相同的获取数据，我有一个操作和一个减缩器接管获取数据，一个组件具有过滤和排序功能，因此，过滤或排序该组件中的数据会影响其他组件中呈现的数据

我不知道在状态树中存储两次数据是否是一个好主意，如果我能做到这一点，通常我如何实现这一点

代码

行动

const fetchData = (data, filters, sortBy) => {
    if (filters && filters.length > 0 ) {
       data = data.filter (......)
    }
    if (sortBy) {
      data.sort(....)
    }
    //the action
    return {
        type: FETCH_DATA,
        payload: data
    }
}

减速器

export default (state = [], action) => {
    switch(action.type) {
        case FETCH_DATA:
            return action.payload
        default:
            return state;
    }
}

应用程序

const mapStateToProps = (state) => {
  return ({
    data: state.data,
    filters: state.filters,
    sortBy: state.sortBy,
  });
}

const mapDispatchToProps = (dispatch) => {
  return {
    loadData: (filters, sortBy) => {
      fetch('data').then(res => res.json()).then(json => {
        dispatch(fetchData(json.data, filters, sortBy));
      }).catch(err => 'error fetching data');
    }
  };
}

获取的数据进入同一页面中的两个组件，过滤和排序与获取数据的操作相同，fetchData

---

如何修改该代码以将两个组件分离开来？？？

对于任何想回答您问题的人来说，共享一些代码示例将非常有用。一般来说，只要您遵循标准的redux模式，使用多少还原器来管理您的商店实际上并不重要。对于在同一个数据对象上工作的两个操作，您只需要确保一个操作一个接一个地发生，可以是同步的，也可以是单独的用户交互。它通过创建记忆选择器解决了您面临的所有问题。@humanbean我检查了库，发现与我的问题无关？？？@CodeEagle，您希望在根据用户选择进行过滤和排序后提供数据，对吗？如果是这种情况，那么您可以创建一个选择器，该选择器从redux接收筛选值和排序值，然后将它们应用于已获取和存储的数据后返回一个列表。因此，一旦用户更改过滤器或排序变量，就不再需要获取数据。简言之，获取数据并存储，读取排序，过滤并存储。现在使用选择器订阅组件，该选择器在应用筛选和排序后返回数据。@CodeEagle我认为它应该可以工作，但您必须将值存储为道具，并将其传递回选择器。看一看。