2016-09-22 6 views
1

전화 할 API 서비스가 많기 때문에이 서비스를 위해 축소 기 (reducers)를 많이 작성해야합니다. 동적으로 아래의 축소 기 작성자를 구현할 수있는 방법이 있습니까? 명시 적으로 구현 아래에 해당 될 수 있습니다Reux with Reux 프로젝트에서 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 
    } 
} 
+0

방법 I시피 상태 출력 –

답변

0

목표는 될 수있는 방법을 설명하는 것입니다. 귀하의 구현은 세부 사항이 다를 수 있습니다.

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 
    } 
+0

에서 보이는 경우, 감속기가 액션 유형의 const 값을 계산할 수있게하기 위해 실제로 하나 이상의 속성 'name'을 액션에 추가합니다. 필자는 redux-promise-middleware를 적용하여 액션 객체의 페이로드가 약속이고 액션 유형이 다른 API 호출 단계로 동적으로 변경되도록했습니다. 하지만 왜 감속기가 action 객체의 'name'속성을 인식 할 수 없는지 잘 모르겠습니다. –

+0

또 하나 더 중요한 점은 감속기에 작업을 성공적으로 전달할 수 있다고해도 구성 요소의 일부가 오류를 만 족하면 감속기가 올바르게 생성되지 않아 전체 상태 시스템이 어딘가에 달라 붙을 수 있기 때문에 상황이 잘못 될 수 있습니다. 그래서 동적 인 감속기를 생성하는 이런 종류의 접근법이 일종의 반 패턴인지 아닌지 다시 생각하기 시작 했습니까? 또는 훨씬 더 좋은 방법이 있습니까? –

+0

위의 디스패처,'''dispatch ({type : "COMPANIES", 페이로드 : fetch (http : // mydomain/companies /, {credentials : 'include'})) then (응답 => response.json()) , 이름 : "COMPANIES"})''' –