Redux를 사용하여 JSON 반복하기 (내 축소기를 어떻게 구성해야합니까?)

Question

개체별로 개체를로드하려는 JSON 개체가 있습니다. 즉, 사용자가 버튼을 클릭 한 다음 ID가 No 인 객체를 클릭합니다. 사용자가 버튼을 다시 클릭하면 id가 1 인 객체가 표시됩니다. 2가 표시됩니다.

export default function() { 
    return [ 
    { 
     id: 1, 
     attribute: "some values" 
    }, 
    { 
     id: 2, 
     attribute: "some other values" 
    }, 
    { 
     id: 3, 
     attribute: "some more values" 
    } 
    ] 
} 

지금이 JSON에서 항상 다음 개체를 가져 오는 함수를 작성하고 내 반작용에 그 결과를 표시 할 지금, 나는 단순히 (전체) JSON을 반환과 같이 감속기을 만들었습니다 신청. 그래도 Redux에서이 작업을 수행하는 방법을 모르겠습니다. 이드를 추적해야합니까? 그렇다면 어떻게 그리고 어디에서?

감속기가 항상 현재 오브젝트와 모든 속성을 포함하는 activeObject-reducer와 같은 항목을 가질 수 있다고 생각했습니다. 그러나 JSON 감속기에서 다른 감속기로 객체를 전달하는 방법을 알지 못합니다. 원칙적으로 올바른 방법입니까 아니면 완전히 다른 방식으로 다른 방법을 추천 하시겠습니까?

Answer 1

분명히 할 수있는 몇 가지 방법이 있습니다.

나는 아마 객체에 배열에서 당신의 국가 키를 확장합니다 :

이

{ 
    active: {} 
    all: [] 
} 

이제 all에 대한 기존 감속기를 다시 사용할 수 있으며 active에 대한 동작을 추가 :

const reducer = (state = {}, action) => { 
    switch (action.type) { 
    case UPDATE_LIST: // whatever action is currently updating your list 
     const nextAll = originalListReducer(state.all, action); 
     return { 
     active: nextAll[0], 
     all: nextAll 
     }; 
    case NEXT_ACTIVE_ITEM: 
     const {active, all} = state; 
     const activeIndex = all.indexOf(active); 
     const nextIndex = (activeIndex + 1) % all.length; 
     return { 
     ...state, 
     active: all[nextIndex] 
     }; 
    default: 
     return state; 
    } 
}; 

위의 originalListReducer과 비슷하게 전화를 거는 자체 ​​감속기로 active 상태를 관리하고 share the all state by passing it as an additional argument을 만들 수도 있습니다. 다음과 같이하십시오 :

const reducer = (state = {}, action) => { 
    switch (action.type) { 
    case UPDATE_LIST: // whatever action is currently updating your list 
     const {all, active} = state; 
     const nextAll = originalListReducer(all, action); 
     const nextActive = nextActiveReducer(active, action, nextAll) 
     return { 
     all: nextAll, 
     active: nextActive 
     }; 
    case NEXT_ACTIVE_ITEM: 
     const {all, active} = state; 
     return { 
     ...state, 
     active: nextActiveReducer(active, action, all) 
     } 
    default: 
     return state; 
    } 
}; 

const nextActiveReducer = (active, action, all) => { 
    switch (action.type) { 
    case UPDATE_LIST: 
     return all[0]; 
    case NEXT_ACTIVE_ITEM: 
     return (all.indexOf(active) + 1) % all.length; 
    default: 
     return active; 
    } 
}; 

당신이 할 수있는 또 다른 방법은 당신의 행동 창조자에게 논리를 밀어 넣는 것입니다.

const rootReducer = combineReducer({ 
    all: allReducer, 
    active: activeReducer 
}); 

const allReducer = (state = [], action) => { 
    switch (action.type) { 
    case UPDATE_LIST: 
     return action.list; 
    default: 
     return state; 
    } 
}; 

const activeReducer = (state = null, action) => { 
    switch (action.type) { 
    case UPDATE_ACTIVE: 
     return action.nextActive; 
    default: 
     return state; 
    } 
}; 

: 이제 감속기 이런 active 및 all의 "바보"업데이터가 될

const nextActiveObject =() => { 
    return (dispatch, getState) => { 
    const {active, all} = getState(); 
    const activeIndex = all.indexOf(active); 
    const nextIndex = (activeIndex + 1) % all.length; 
    const nextActive = all[nextIndex]; 
    dispatch({ type: UPDATE_ACTIVE, active: nextActive }); 
    } 
}; 

:이 경우 현재 상태를보고 redux-thunk를 사용하고 적절한 "다음"활성 개체 작업을 전달할 수 있습니다

가고 싶은 분은 really up to you입니다.