React with ReduxプロジェクトでAPIサービスコールのダイナミックリデューサクリエータを実装する方法は？

Question

私は多くのAPIサービスを呼び出すことができるので、これらのサービスには減速機を何台も書く必要があります。下に示すように減速機の作成者を実装する方法はありますか？明示的な実装以下に相当することができ

const PENDING = 'PENDING' 
const REJECTED = 'REJECTED' 
const FULFILLED = 'FULFILLED' 
const COMPANIES = 'COMPANIES' 

let createReducer = (name) => (state, action) => { 
    switch (action.type) { 
    case name + '_' + PENDING: 
     return {...state, 
     isLoading: false 
     } 
    case name + '_' + FULFILLED: 
     return {...state, 
     companies: action.payload, 
     isLoading: false 
     } 
    case name + '_' + REJECTED: 
     return {...state, 
     isLoading: false, 
     err: action.payload 
     } 
    default: 
     return state 
    } 
} 

let comapnyReducer = createReducer(COMPANIES) 

：この例の

const comapnyReducer = (state={isLoading: false}, action) => { 
switch (action.type) { 
    case 'COMPANIES_PENDING': 
    return {...state, 
     isLoading: false 
    } 
    case 'COMPANIES_FULFILLED': 
    return {...state, 
     companies: action.payload, 
     isLoading: false 
    } 
    case 'COMPANIES_REJECTED': 
    return {...state, 
     isLoading: false, 
     err: action.payload 
    } 
    default: 
    return state 
    } 
} 

Answer 1

目標はそれがあるかもしれないどのように説明することです。実装の詳細が異なる場合があります。

DEMO JSBIN

const PENDING = 'PENDING' 
const REJECTED = 'REJECTED' 
const FULFILLED = 'FULFILLED' 

const reducer = (state={isLoading:false}, action) => { 
    const {name, type} = action; 
    switch (type) { 
    case name + '_' + PENDING: 
     return {...state, isLoading: false } 
    case name + '_' + FULFILLED: 
     return {...state, 
     items: action.payload, 
     isLoading: false 
     } 
    case name + '_' + REJECTED: 
     return {...state, 
     isLoading: false, 
     err: action.payload 
     } 
    default: 
     return state 
    } 
} 

const entities = (state={},action)=>{ 
    if(action.name){ 
    const name = action.name.toLowerCase() 
    return {...state, [name]:reducer(state[name],action) } 
    }else{ 
    return state 
    } 
} 

動作例

{type:'COMPANIES_FULFILLED',name:'COMPANIES',payload:[1,2,3,4]} 

結果

"companies": { 
     "items": [ 
      1, 
      2, 
      3, 
      4 
     ], 
     "isLoading": false 
    }, 
    "messages": { 
     "items": [ 
      1, 
      2, 
      3, 
      4 
     ], 
     "isLoading": false 
    }