どのようにさらにツリー与えられた減速のために

Question

ダウンReduxの状態を更新するために、私のReduxの状態ツリーは通常、このようなものになります。私は、非同期要求を行う際に

{ 
    someField: 'some value', 
    // ... more fields 
    metadata: { 
    pending: false, 
    fetched: true, 
    } 
} 

は一般的に、私はSOME_ACTION_REQUESTアクションを発射し、そのmetadata.pendingプロパティをtrueに設定します。マッチするSOME_ACTION_RESPONSEまたはSOME_ACTION_ERRORイベントが後でトリクルされると、再びfalseにリセットされます。

はしかし、私は状態を更新方法が少し冗長です：

case actions.SOME_ACTION_REQUEST: { 
    return { 
    ...state, 
    metadata: { ...state.metadata, pending: true }, 
    }; 
} 

はこれを行う簡単な方法はありますか？

Object.assign({}, state, { metadata: { pending: true } })もあまり読みにくくありません。

Answer 1

還元剤の入れ子構造にすることができます。

メタデータの名前付け機能を持つフィールドを変更するには、これを呼び出します。

例コード

const metadata = (state = [], action = {}) => { 
    switch (action.type) { 
     case actions.SOME_ACTION_REQUEST:: 
      return {...state, ...action.payload.metadata}; 

     default: 
      return state; 
    } 
}; 
const someReducer = (state = initalState, action = {}) => { 
    let metadata = {}; 
    switch (action.type) { 
     case actions.SOME_ACTION_REQUEST: { 
      metadata = metadata(state.metadata, action) 
      return { 
       ...state, 
       ...metadata 
       }; 
      } 
    } 
}; 

Answer 2

これは、不変のデータ更新を行う典型的な例です。詳細情報については、Prerequisite ConceptsおよびImmutable Update PatternsページのReduxドキュメントの新しいStructuring Reducersセクションを読んでみてください。

Answer 3

実際、Reduxの欠点であり、MobXを使用する場合は同じ問題があります。だから、答えは何とか一般化するだけです - 引数を定数として取得し、それらを一度だけマージし、すべての非同期アクションに対して再利用するリデューサファクトリを作成してください。

I've created a libraryこの問題については、気軽にご覧ください。また、生のReduxはかなり冗長で、あなたのドメインモデルを最良の方法で把握しようとしています。 あなたの例では、そのようになります。応答は得ませんした後、最後のセレクタから

import { createTile } from 'redux-tiles'; 

const someTile = createTile({ 
    type: ['some', 'example'], 
    fn: ({ api, params }) => api.get('/some/request', params), 
}); 

dispatch(actions.some.example(params)); 
selectors.some.example(state)); // { isPending: true, error: null, data: null } 

データが自動的に更新されます - 手動で、このようなものを書くので、不要に。

もう1つの問題はネストされたアップデートです。同じことをする必要がありますが、より多くの冗長さがあり、私は常に解決しようとしました。しかし、もちろん、シンプルな使用例をカバーするだけの、かなりシンプルなライブラリです。複雑なものについては、カスタムテーラーを試してみることをお勧めします。