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でこれをどうやって行うのか分かりません。私はIDを追跡する必要がありますか？もしそうなら、どうやってどこで？

私は、レデューサーに、常に現在のオブジェクトとそのすべての属性を含む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; 
    } 
}; 

activeの状態は、上記originalListReducerと同様に、あなた自身が呼び出す独自の減速機によって管理され、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です。