Redux操作手动过滤嵌套还原器

也许我错过了一些非常明显的东西，但今天我却被它绊倒了

假设我们有一个Redux存储，其结构如下：

const state = {
  ...
  pages: {
    ...
    accountPage: {
      currentTab: 'dashboard',
      fetching: false,
      tableSettings: {
        sortDir: 'asc',
        sortField: 'name'
      }
    }
  }
}

所以很明显有一个主减速器

export default combineReducers({
  ...
  pages: pagesReducer
  ...
});

然后，页面的缩减器具有每个页面的缩减器

export default combineReducers({
  ...
  accountPage: accountPageReducer
  ...
});

现在我们终于开始讨论问题的实质，这个特殊状态的减速器

export default handleActions({
   [setCurrentTab]: (state, action) => { ... },
   [setIsFetching]: (state, action) => { ... }
});

没关系，好吗？那么，在

tableSettings

开头给出的状态中的键实际上应该由它自己的reducer处理。此模式在状态中可能存在多次，因此将其抽象为一个创建函数：

const defaultState = {
  sortDir: 'asc',
  sortField: null
};

export const createTableSettingReducer (actions, extra ={}) => {
  return handleActions({
    [actions.changeSortDir]: (state, action) => ({ ...state, sortDir: action.payload }),
    [actions.changeSortField]: (state, action) => ({ ...state, sortField: action.payload }),
    ...extra
  }, defaultState)
}

因此，在state节的reducer（

accountPageReducer

）之上，我们创建了reducer：

// pretend these actions were imported
const tableSettingsReducer = createTableSettingReducer({
  changeSortDir: setSortDir,
  changeSortField: setSortField
});

所以问题是，我应该把

tableSettingsReducer

放在哪里

这当然行不通：

export default handleActions({
   [setCurrentTab]: (state, action) => { ... },
   [setIsFetching]: (state, action) => { ... },
   tableSettings: tableSettingsReducer
});

它不起作用，因为

handleActions

希望将动作常量用作键，而不是状态中的实际键

也没有地方可以使用组合减速机，因为这个状态片只有一个嵌套的减速机

currentTab

和

fetching

不需要自己的减速机，因此使用

组合减速机是徒劳的

    const initialCurrentTab = 'dashboard';
    const currentTabReducer = handleActions({
       [setCurrentTab]: (state, action) => {
         return action.payload;
       },
    }, initialCurrentTab);

    const defaultFetchingState = false;
    const fetchingReducer = handleActions({
       [setIsFetching]: (state, action) => {
         return action.payload;
       },
    }, defaultFetchingState);

    export default combineReducers({
      currentTab: currentTabReducer,
      fetching: fetchingReducer,
      tableSettings: tableSettingsReducer,
    });

我知道最近
redux操作
开始支持嵌套还原器……但实际上没有任何文档确切说明应该如何执行，甚至没有描述实现该操作所需的参数

我可能会使用
combineActions
，并将
handleActions
中的所有操作组合起来，以执行嵌套减速器可以执行的每个操作。但是这看起来不是很干净…另外，如果嵌套的减速器有自己的嵌套减速器呢？这意味着，每当这些还原程序可以处理一个新操作时，该操作需要添加到其所有父级中的
combineActions
。不是最好的

想法？
你所在州的每把钥匙都有自己的减速器。有些减速机非常简单，有些减速机本身由其他减速机组成。您的状态树的每个级别上的所有姐妹键都可以与
combinereducer
组合

    const initialCurrentTab = 'dashboard';
    const currentTabReducer = handleActions({
       [setCurrentTab]: (state, action) => {
         return action.payload;
       },
    }, initialCurrentTab);

    const defaultFetchingState = false;
    const fetchingReducer = handleActions({
       [setIsFetching]: (state, action) => {
         return action.payload;
       },
    }, defaultFetchingState);

    export default combineReducers({
      currentTab: currentTabReducer,
      fetching: fetchingReducer,
      tableSettings: tableSettingsReducer,
    });

你所在州的每把钥匙都有自己的减速器。有些减速机非常简单，有些减速机本身由其他减速机组成。您的状态树的每个级别上的所有姐妹键都可以与
combinereducer
组合

    const initialCurrentTab = 'dashboard';
    const currentTabReducer = handleActions({
       [setCurrentTab]: (state, action) => {
         return action.payload;
       },
    }, initialCurrentTab);

    const defaultFetchingState = false;
    const fetchingReducer = handleActions({
       [setIsFetching]: (state, action) => {
         return action.payload;
       },
    }, defaultFetchingState);

    export default combineReducers({
      currentTab: currentTabReducer,
      fetching: fetchingReducer,
      tableSettings: tableSettingsReducer,
    });