質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Redux

Reduxは、JavaScriptアプリケーションの状態を管理するためのオープンソースライブラリです。ReactやAngularで一般的にユーザーインターフェイスの構築に利用されます。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

1回答

3595閲覧

複数のReducerに分散したStateを同時に更新したい

zirou

総合スコア12

Redux

Reduxは、JavaScriptアプリケーションの状態を管理するためのオープンソースライブラリです。ReactやAngularで一般的にユーザーインターフェイスの構築に利用されます。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2018/11/22 19:26

編集2018/11/28 12:56

複数のReducerに分散したStateを同時に更新したい

react + Redux でアプリケーションを作成しています。

stateの中にReducerA、ReducerB、ReducerCが同じ階層で存在します。
actionXが発行された時に同時にReducerA、ReducerB、ReducerCにあるstateを更新したいのですが、
ReducerA、ReducerB、ReducerCそれぞれでactionXの処理をした場合、同時に更新されないと思います。
(ランダムな順番で処理される? 結果Componentが3回更新される?)

このような場合完全に同じタイミングでReducerA、ReducerB、ReducerCを更新するにはどうしたらよいでしょうか?

componentがupdateされる際データの不整合でエラーになったりします。

このようなパターンについて詳しい方がいたらご教授いただけると幸いです。

##追記:State全体の構成

javascript

1const state = { 2 reducerA: { 3 a:"a" 4 } 5 6 reducerB: { 7 b:"b" 8 } 9 10 reducerC: { 11 c:"c" 12 } 13};

該当のソースコード ※initialState追記しました

javascript

1 2export const actionX = (a, b, c) => ({ 3 type: "ACTION_X", 4 payload: { a: a, b: b, c: c }, 5 meta: {}, 6 error: false 7}); 8 9const initialStateA = { 10 a: "", 11}; 12 13export function reducerA(state = initialStateA, action){ 14 switch (action.type) { 15 case "ACTION_X": 16 return Object.assign({}, state, { 17 a: action.payload.a 18 }); 19 } 20} 21 22const initialStateB = { 23 b: "", 24}; 25 26export function reducerB(state = initialStateB, action){ 27 switch (action.type) { 28 case "ACTION_X": 29 return Object.assign({}, state, { 30 b: action.payload.b 31 }); 32 } 33} 34 35const initialStateC = { 36 c: "", 37}; 38 39export function reducerC(state = initialStateC, action){ 40 switch (action.type) { 41 case "ACTION_X": 42 return Object.assign({}, state, { 43 c: action.payload.c 44 }); 45 } 46}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

下記の様にaction.payloadをassignすると良いのではないでしょうか。

JavaScript

1export function reducerX(state, action){ 2 switch (action.type) { 3 case "ACTION_X": 4 return Object.assign({}, state, action.payload); 5 } 6}

投稿2018/11/23 00:57

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

zirou

2018/11/26 17:26

a、b、c、は責務の分割のためReducerを別にしています。 そのためreducerXからはreducerA、reducerB、reducerC内にあるフィールドにアクセスできずに困っています。ご回答いただいた通りにreducerX内でpayloadをassignしても、reducerX内に新たなフィールドa、b、c、が生成されてしまいます。
退会済みユーザー

退会済みユーザー

2018/11/28 12:04

回答のために少し質問をさせてください。 1. stateは{a: null, b: null, c: null}の様なオブジェクトでは無いのでしょうか?質問にstateを追記頂けると助かります。 2. フィールドとは何を指す言葉でしょうか?プロパティ?
zirou

2018/11/28 12:52 編集

tksbeeさん ご回答ありがとうございます。 1.stateは{a: null, b: null, c: null}のような感じです。 2.フィールドとは、stete内にある a、b、cのことを指して書きました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問