状態全体をReduxで更新する方法はありますか？

Question

私は空のstateオブジェクトを持っています。このオブジェクトは、アプリケーションの開始時にデフォルトの空のフィールドでインスタンス化されています。

空の配列usersが含まれています。

const state = { 
        users: [] 
       } 

開始時に私はいくつかのコマンドをサーバーに送り、サーバーはそれに応答してデータを送信します。

私はusersを移植する必要があるので、私はユーザーアレイ全体をサーバーから受信した新しいものに置き換えたいと思います。

あなたは現在の状態を受け取り、それにいくつかの変更を適用して新しい状態を返すことをお読みください。私は、たとえば、変更ユーザパスワードは、その後、私はこのようなアクションを呼ぶだろうしたいとき、それはいいですね：

{ 
    action: 'CHANGE_PASSWORD', 
    user: 'john', 
    password: 'karamba', 
} 

これは、ユーザーjohnが現在の状態で見られるディスパッチャによって管理されるだろうし、パスワードは新しいパスワードに置き換えられます。

これは、いくつかの初期データをロードするシナリオに対しては正しいですか？

もしそうなら、アクションはどのように見えますか？

{ 
    action: 'FETCH_USERS' 
} 

次に、還元剤はusersアレイ全体を置き換えるでしょうか？

Answer 1

だけでアプリ内のすべての状態変化は、単一のオブジェクトの状態ツリーに格納されている

• 最初のいくつかの基本をカバーしてみましょう。
• この状態ツリーは不変である必要があります。
• アクションをディスパッチする必要がある状態を更新（置換）する必要がある場合はいつでも、このアクションイベントは、状態を置き換えるためにリデューサーによってキャプチャされる必要があります。
• アクションは、プレーンJSです。状態/アプリへの最小限の変更を記述するオブジェクトです。これにはTYPEプロパティが必要です。
• UIコンポーネントは、変更がどのように行われているか自覚していません。彼らが知っていることは、彼らが行動を派遣する必要があるということだけです。
• 純関数 - 戻り値は引数の値のみに依存し、副作用（ネットワークまたはdb呼び出し）はなく、等価（同じ引数は常に同じ値を返します）、渡された値は変更されませんそれらは
• リダクター - アプリケーションとアクションの状態全体を取り、アプリケーションの次の状態を返す純粋な関数です（現在の状態を変更しないこと、新しいオブジェクトを返さなければならないことを保証します）。メソッドシグネチャ：(State,Action) => State;

非同期フロー（ネットワーク要求からデータを取得している場所）の動作はどうなっていますか？使用している非同期フローには、あるタイプのミドルウェアhttp://redux.js.org/docs/advanced/Middleware.htmlを使用する必要があります。

以下のアクションでは、私はthunkというミドルウェアを使用しました。

actions.js：

export function receiveAllProducts(users){ 
    return { 
     type: 'RECEIVED_ALL_USERS', 
     users: users 
    } 
} 


export function fetchALLUserData(){ 
    return thunkLoadAllUserData; 
} 


const thunkLoadAllUserData = (dispatch) => { 
     let users = []; 
     users = //Some network request to get data 
     dispatch(receivedAllUserData(users)); 
    }); 
} 

だからあなたは、そのタイプとしてreceivedAllUserDataアクションを呼び出す、ユーザーを取得するために（非同期フローにReduxのミドルウェア）thunk機能を返すfetchALLUserDataにアクションを、派遣う：'RECEIVED_ALL_USERS'。このタイプは、純粋な関数とObject.assignを使用して新しい状態（新しいユーザーで）を返すレデューサーによって取得されます。

還元剤の純粋な機能はどのようなものですか？ reducers.jsは：

const initialState = {} 

export default (currentState = initialState, action = {}) => { 


    switch (action.type) { 

    case 'RECEIVED_ALL_USERS': 
     return Object.assign({}, currentState, { 
     users: action.users, 
     }); 
    case 'RECEIVE_ALL_PRODUCTS': 
     return Object.assign({}, currentState, { 
     productsAsObject: action.productsObject, 
     }); 

    // ...other actions 

    default: 
     return currentState; 
    } 
} 

Object.assign（）メソッドは、ターゲット・オブジェクトに1つ以上のソースオブジェクトからのすべての列挙独自のプロパティの値をコピーするために使用されます。 そのためには、全体のcurrentStateのをコピーして、ユーザーを無効にしますフェッチユーザー

またあなたも状態を更新するオブジェクトの拡散演算子を使用することができますと属性：http://redux.js.org/docs/recipes/UsingObjectSpreadOperator.html

Answer 2

還元剤は、propsの中のusersを置き換える必要があります。そしてcomponentWillReceivePropsメソッド内stateローカルの変更や小道具からローカル状態を設定するあなたは、アプリの起動時にあなたの状態にものを設定する方法storeとcreateStore作品をチェックする必要がある場合はthis.setState{users: @nextProps.users}

Answer 3

を使用。 preloadedStateアトリビュートを渡すと、リデューサにそのアトリビュートが渡されます。

アプリの実行中にusers配列を変更する場合は、AJAX呼び出しなどを使用してアクションを実行します。

したがって、REQUEST_USERSアクションを送信することがあります。あなたのサーバにAJAXリクエストを送信し、このリクエストの成功とエラーのコールバックでは、ペイロードを新しいユーザまたはエラーメッセージとしてREQUEST_USERS_SUCCESSとREQUEST_USERS_FAILUREアクションをディスパッチすることができます。

reduxでAJAX要求を適切に処理する方法の詳細については、hereを参照してください。