Javascript 高阶减速器在多减速器上的应用

我正在学习更深入的redux，在处理高阶减缩器时遇到了一些问题

我试图通过一个简单的分页示例来理解它是如何工作的

注意：下面的代码只是nodejs上下文中redux的一个快速示例，没有透明和良好实践，因此，我无法访问spread/destruc操作符，因此我在有状态地使用它，而这根本不是一个良好实践，我知道

假设我有一个可分页的高阶减缩器：

const paginable = (reducer, options) => {
    const PAGE_OFFSET = options.limit;
    const ATTRIBUTE_TO_SLICE = options.attr;
    const initialState = {
        all: reducer(undefined, {}),
        displayed: [],
        limit: PAGE_OFFSET,
        currentPage: 1
    };

    const _actionHandler = {
        'CHANGE_PAGE': (state, newPage) => ({all: state.all, displayed: state.displayed, currentPage: newPage, limit: PAGE_OFFSET}),
        'CHANGE_DISPLAYED': state => ({
            all: state.all, currentPage: state.currentPage, limit: PAGE_OFFSET,
            displayed: state.all[ATTRIBUTE_TO_SLICE].slice((state.currentPage - 1) * PAGE_OFFSET,
                state.currentPage * PAGE_OFFSET)
        })
    };

    return (state = initialState, action) => {
        const handler = _actionHandler[action.type];
        if (handler) {
            return handler(state, action.payload);
        }
        const newAll = reducer(state.all, action);
        state.all = newAll;
        return state;
    };
};

module.exports = paginable;

我想在这两个减速器上应用：

const _actionHandler = {
    'ADD': (state, item) => ({list: [...state.list, item]})
};

const initialState = {
    list: ['a', 'b', 'c', 'd', 'e']
};

const listReducer = (state = initialState, action) => {
    const handler = _actionHandler[action.type];
    return handler ? handler(state, action.payload) : state;
};

module.exports = listReducer;

及

我创建我的店铺如下：

const redux = require('redux');
const listReducer = require('./reducer/list');
const arrayReducer = require('./reducer/arrayOfX');
const paginable = require('./reducer/paginable');

const reducers = redux.combineReducers({
    list: paginable(listReducer, {limit: 2, attr: 'list'}),
    arr: paginable(arrayReducer, {limit: 3, attr: 'arr'})
});

const store = redux.createStore(reducers);

我现在的问题是，每次我都会发送一个动作，如

CHANGE\u PAGE

或

CHANGE\u displated

，它总是将由两个减速机

arr

和

list

处理，这是我不想要的

我本来打算创建新的操作，如

更改显示的\u列表

和

更改显示的\u数组

，但这将迫使我在分页缩减器中管理更多我绝对不想管理的操作。。。我可能错过了一些重要的事情

---

有什么建议吗？

实际上，你不需要两个减速器。一个高阶减速机就可以完成这项工作

我们可以将类型传递给父包装器并从中返回函数。这将在您的状态中创建2个条目

因此，让我们先创建高阶减速器：-

const initialState = {
    all: {},
    displayed: [],
    limit: PAGE_OFFSET,
    currentPage: 1
};


export default function wrapper(type) {
  return function(state=initialState,action) {
    //using es6 literals to concatenate the string
    case `CHANGE_DISPLAYED_${type}`:
        // update your state
    case `CHANGE_PAGE_${type}`:
       // update your state
  }
}

现在，按以下方式调用减速机

   const indexReducer = combineReducers({
     "arrayType": wrapper("array"),
     "listType" : wrapper("list")
   })

要了解更多信息，您可以查看reducer逻辑的重用

---

如果您遇到任何问题，请告诉我。

实际上，您不需要两个减速器。一个高阶减速机就可以完成这项工作

我们可以将类型传递给父包装器并从中返回函数。这将在您的状态中创建2个条目

因此，让我们先创建高阶减速器：-

const initialState = {
    all: {},
    displayed: [],
    limit: PAGE_OFFSET,
    currentPage: 1
};


export default function wrapper(type) {
  return function(state=initialState,action) {
    //using es6 literals to concatenate the string
    case `CHANGE_DISPLAYED_${type}`:
        // update your state
    case `CHANGE_PAGE_${type}`:
       // update your state
  }
}

现在，按以下方式调用减速机

   const indexReducer = combineReducers({
     "arrayType": wrapper("array"),
     "listType" : wrapper("list")
   })

要了解更多信息，您可以查看reducer逻辑的重用

如果您遇到任何问题，请告诉我