高階減速機應用於多個減速機

我正在學習更深入的減速機，並且我在處理更高階的減速機時遇到了一些麻煩。高階減速機應用於多個減速機

我想通過一個簡單的分頁示例來了解它是如何工作的。

注意：下面的代碼只是nodejs上下文中redux的一個簡單示例，沒有轉譯和良好實踐，因此我無法訪問spread/destruc運算符，因此我正在使用它，同時這不是一個很好的做法，在所有的，我知道

所以，讓我們想象一下，我有一個paginable高階減速機：

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 initialState = { 
    arr: ['z', 'x', 'y', 'b', 'b', 'c', 'd'] 
}; 

const arrayReducer = (state = initialState) => { 
    return state; 
}; 

module.exports = arrayReducer;

創建我的商店如下：

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_PAGE或CHANGE_DISPLAYED一個動作，它總是將由兩個減速器arr和list處理，這是我不想要的。

我想要創建像CHANGE_DISPLAYED_LIST和CHANGE_DISPLAYED_ARRAY這樣的新動作，但它會迫使我在可分頁縮減器中管理更多動作，我絕對不想......我可能會丟失重要的東西。

有什麼建議嗎？

來源

2017-04-05 mfrachet

你實際上不需要2個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") 
    })

欲瞭解更多信息，你可以檢查出重用減速邏輯here。

讓我知道你是否面臨任何問題。

來源

2017-04-05 07:06:30

高階減速機應用於多個減速機

回答

相關問題