複数の減速器に適用された高次減速器

Question

高次減速を学習し、高次減速器を扱う際に問題があります。

ページングの簡単な例を使ってどのように動作するかを理解しようとしています。

NB：以下のコードは、トランジションと優れたプラクティスがないnodejsコンテキストでのreduxの簡単な例です。したがって、私は普及/破壊オペレータにアクセスできないため、ステートフルで使用しています。 それがすべてでは良い習慣ではない、と私はそう

は、のは、私が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様作用を派遣することで、それ常に 2人の減耗業者arrとlistによって処理されますが、私はそれを望ましくありません。

CHANGE_DISPLAYED_LISTとCHANGE_DISPLAYED_ARRAYのような新しいアクションを作成することを念頭に置いていましたが、ページング可能なレデューサーでより多くのアクションを管理しなければならないことは絶対にありません。

提案がありますか？

Answer 1

実際には2つのレデューサーが必要ありません。単一の高次減速機が仕事をすることができます。

型を親ラッパーに渡して、それから関数を返すことができます。これにより、あなたの状態に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 
    } 
} 

、あなたが減速ロジックhereを再利用するためにチェックアウトすることができます詳細情報については道

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

を以下に減速を呼び出します。

問題が発生した場合はお知らせください。