用于单个模块内大状态的 Redux reducer 设计

Question

我遇到过两种用于在单个模块中处理大型状态的减速器设计。第一种方法是将所有变量都放在一个大状态中并具有一个 reducer 函数。

const initialState = {
   results: [],
   pagination: {},
   filters: [],
   appliedFilters = [],
}

const reducer = (st = { ...initialState }, action) => {
  const state = st;
  switch (action.type) {
     case 'SEARCH':{
         return {
           ...state,
           results: action.results,
           pagination: action.pagination,
           filters: action.filters,
           appliedFilters: action.appliedFilters 
     },
     case 'APPLY_FILTER':{
         return {
           ...state,
           results: action.results,
           pagination: action.pagination,
           filters: action.filters,
           appliedFilters: action.appliedFilters 
     },
     case 'PAGINATE':{
         return {
           ...state,
           results: action.results,
           pagination: action.pagination,           
     }          
}

第二种方法是为数据中的子项设置多个缩减器。

export function applications(state = [], { type, results}) {
  switch (type) {
    case SEARCH:
      return results;   
   case INIT_RESULTS:
      return [];
    default:
      return state;
  }
}

export function pagination(state = null, { type, paginationData }) {
  switch (type) {
    case SEARCH:
      return paginationData;   
    default:
      return state;
  }
}

export function filters(state = [], { type, filterData }) {
  switch (type) {
    case SEARCH:
      return filterData;
    case UPDATE_FILTERS:
      return filterData;
    default:
      return state;
  }
}

我认为两者各有利弊。考虑到可扩展性和模块化，哪个更好？

Answer 1

总的来说，这两者都与我们的官方建议相去甚远。

每个sub-state你应该有一个“切片”reducer（这排除了你的第一个选项
你不应该把 reducer 当作“设置一个值”，而是把整个“计算如何获取值”移到 reducer 中，把你的 action 当作“描述一个发生的事件”来处理
您应该使用我们推荐和教授的官方 Redux 工具包作为编写 Redux sinde 2019 的默认方式。说真的，看看它。它大约是代码的 1/4。没有更多的 switch..case 减速器或 ACTION_TYPES.

请给出Redux Style Guide a read and to learn modern Redux with Redux Toolkit, please follow the official Redux Tutorial

用于单个模块内大状态的 Redux reducer 设计

Redux reducer design for large state within a single module

reduce

redux