2016-02-02 7 views
5

私は厚くてReduxの新機能かもしれませんが、誰かが私にnormalizrのようなものを使用する簡単なユースケースを与えることができたら大変です。ReduxアプリケーションでAPI応答を正規化する際のポイントは何ですか?

私は私が私が届かないことは、ネストされたオブジェクトを消費するストアの理由it's hardであると仮定しHow do I handle nested API responses in a Flux application?

ここに挙げた例を理解していません。

私のアプリは、ユーザーが、リストを表示する2つの異なるAPIに話をして、新しいアイテムや新しいリストを作成することができ、中大型ポータルサイトです。

+0

あなたはドキュメントを読みましたか? http://redux.js.org/docs/basics/Reducers.html –

答えて

5

私はすべてのオブジェクトを正常化するが、私はnormalizr使用しません。

私はコードを読みやすくするために正規化したいと思います。以下の例。また、オブジェクトを参照して重複を排除するのがずっと簡単になります。たとえば、elsesリストのtodoアイテムを購読している場合、そのtodoの複製バージョンを購読者のsubscribedTodosリストに戻すか、取得するためには、他のtodoのユーザーIDとToDoを知る必要がありますそれに。戻る可読性へ

:これらの理解/読み良いですか?

function rootReducer (state, action) { 
    const { type, payload } = action; 

    if(action.type === MODIFY_TODO) { 
    return { 
     ...state, 
     users: { 
     ...state.users, 
     [payload.userID]: { 
      ...state.users[userID], 
      todos: { 
      ...state.users[userID].todos, 
      [payload.todo.todoID]: { 
       ...state[userID].todos[todoID], 
       ...todo 
      } 
      } 
     } 
     } 
    } 
    } else { return state; } 
} 

function rootReducer (state, action) { 
    const { type, payload } = action; 

    if(type === MODIFY_TODO) { 
    return { 
     ...state, 
     todos: { 
     state.todos[payload.todo.id]: { 
      ...state.todos[payload.todo.id], 
      ...payload.todo 
     } 
     } 
    } 
    } else { return state; } 
} 
+0

これはかなり明確な感謝です。私は、後者の機能は読みやすいと思います。 –

1

必ずしもネストしたオブジェクトを消費するのは難しくありません。

それはすべてあなたのユースケースに依存し、あなたのUIがどのように編成されています。

あなたがnormalizrを使用することは意味がない場合は、それを使用しないでください。そのモジュールは本当に必要条件ではありません。

+0

良い点、ありがとうございます。 –

関連する問題