私の還元レデューサーはすべて同じように見えます。私はそれを間違っているのですか？

Question

私はReduxと私のレデューサーを使ってかなりシンプルなアプリケーションを構築しています。それは技術的には機能しますが、それはコードの重複の多くです。

// The employees reducer 
export default (state = initialState, action) => { 
    switch (action.type) { 
    case EMPLOYEES_REQUEST: 
     return [ ...state, { isFetching: true } ] 
    case EMPLOYEES_SUCCESS: 
     // DEBUG 
     console.log('Dispatching employees'); 
     console.log(action.response); 
     // END DEBUG 

     // Return employees directly in the employees state 
     return { ...state, list: JSON.parse(action.response) }; 
    case EMPLOYEES_FAILURE: 
     return [ ...state, { isFetching: false } ] 
    default: 
     return state 
    } 
} 

そして

// The services reducer 
export default (state = initialState, action) => { 
    switch (action.type) { 
    case SERVICES_REQUEST: 
     return [ ...state, { isFetching: true } ] 
    case SERVICES_SUCCESS: 
     // DEBUG 
     console.log('Dispatching services'); 
     console.log(action.response); 
     // END DEBUG 

     // Return services directly in the services state 
     return { ...state, list: JSON.parse(action.response) }; 
    case SERVICES_FAILURE: 
     return [ ...state, { isFetching: false } ] 
    default: 
     return state 
    } 
} 

異なるアクションを持つ一般的な減速を使用するために私ができる何かがありますか？

ありがとうございます！

Answer 1

リデューサーは単なる機能です。常に高次関数を使ってそれを作ることができます。

const makeListReducer = (initial, prefix) => (state = initial, action) => { 
    switch(action.type) { 
    case `${prefix}_REQUEST`: return {...state, isFetching: true} 
    case `${prefix}_SUCCESS`: return {...state, isFetching: false, list: JSON.parse(action.response)} 
    case `${prefix}_FAILURE`: return {...state, isFetching: false, /*etc*/} 
    } 

    return state 
} 

// The employees reducer 
export default makeListReducer(initialState, 'EMPLOYEES')