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

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

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

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

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

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

Q&A

解決済

1回答

1794閲覧

ReactのReduxで複数のステートを同時に更新する方法を教えてください

begginerpg

総合スコア10

Redux

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

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

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

0グッド

0クリップ

投稿2020/05/16 05:27

編集2020/05/16 12:36

React始めたばかりの初心者です。
React-Reduxで画面を作成しようとしていますが、アクションの処理の仕方がよく理解できません。
複数のステート(Rootは同じでそこにぶら下がるステートが異なるもの)を1度のアクションで更新できないものでしょうか。

例えば、一覧部と詳細部が同時に表示されている画面があったとして、
それぞれステートが別々に作成されていたとします。※Rootは同じでその下が分かれてるものとします
ここで詳細部で保存処理のアクションを起こした場合に、詳細側のステートと一覧側のステートを同時に更新したい場合、どのような処理になるのでしょうか?

ActionCreatorから別々のReducerを2つ呼べると解決しそうなのですが。
(以下のソースで説明するとtest02Actions.tsのrefreshActionからtest01Reducer.tsのTest01ActionTypes.searchを後続や同時で呼び出すような処理)

ほかにも後続につなげたパターンも知りたいです・・・。

或いは異なるステートを2つ同時に更新するようなReducerの書き方があればそれでも良さそうです。

■プロジェクトの構成
store
└application
├test01
│ ├test01Actions.ts
│ ├test01Reducer.ts
│ └test01Types.ts

├test02
│ ├test02Actions.ts
│ ├test02Reducer.ts
│ └test02Types.ts

■ステート

TypeScript

1const rootReducer = combineReducers({ 2 test01: test01Reducer, 3 test02: test02Reducer 4});

■test01Reducer.ts

TypeScript

1import { Test01StateType, Test01ActionTypes, test01ActionType } from "./test01Types"; 2 3/** 4 * 初期ステート 5 */ 6const initialState: Test01StateType = { 7 list : [] 8}; 9 10/** 11 * Reducer (ステート変更処理)の定義 12 * @param currentState 初期値はinitialState 13 * @param action 14 */ 15export const test01Reducer = (currentState = initialState, action: test01ActionType): Test01StateType => { 16 switch (action.type) { 17 case Test01ActionTypes.search: 18 return doSearchReduce(currentState); 19 20 default: 21 // const _: never = action; 22 return currentState; 23 } 24}; 25 26/** 27 * 検索結果反映 28 * @param state 29 */ 30const doSearchReduce = (state : Test01StateType) => { 31 32 const newState = Object.assign({}, state); 33 newState.list = []; 34 return newState; 35}; 36

■test02Actions.ts

TypeScript

1import { Test02ActionTypes, test02ActionType } from "./test02Types"; 2 3// * 4// * Action Creator 5// * 6 7/** 8 * 最新化 9 */ 10export const refreshAction = (): test02ActionType => { 11 return { 12 type: Test02ActionTypes.refresh, // 13 }; 14}; 15

■test02Reducer.ts

TypeScript

1import { Test02StateType, Test02ActionTypes, test02ActionType } from "./test02Types"; 2 3/** 4 * 初期ステート 5 */ 6const initialState: Test02StateType = { 7 cd : "", 8 text : "" 9}; 10 11/** 12 * Reducer (ステート変更処理)の定義 13 * @param currentState 初期値はinitialState 14 * @param action 15 */ 16export const test02Reducer = (currentState = initialState, action: test02ActionType): Test02StateType => { 17 switch (action.type) { 18 case Test02ActionTypes.refresh: 19 return doRefreshReduce(currentState); 20 21 default: 22 // const _: never = action; 23 return currentState; 24 } 25}; 26 27/** 28 * 最新化 29 * @param state 30 */ 31const doRefreshReduce = (state : Test02StateType) => { 32 33 const newState = Object.assign({}, state); 34 newState.cd = "new code"; 35 newState.text = "new text"; 36 return newState; 37}; 38

■環境
・React
・TypeScript
・React-Redux

ご教示宜しくお願い致します。

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

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

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

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

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

hoshi-takanori

2020/05/16 17:45

「ActionCreatorがReducerを呼ぶ」という理解が間違ってます。action creator は action を作るだけで、それを dispatch すると各 reducer に action が送られます。reducer ではその action に興味があれば反応すればいいし、興味がなければ無視して同じ state を返します。ので、ひとつの action に複数の reducer が反応するように書けばいいと思います。 https://medium.com/@thomasmarren/share-actions-across-multiple-reducers-in-redux-e359a75f2242 https://stackoverflow.com/questions/40530661/redux-can-i-use-one-action-type-in-separate-reducers
begginerpg

2020/05/16 19:07

なるほど、理解しました! actionとreducerが1:1だと思いこんでドツボに入ってました・・・。 非常に分かりやすい説明で助かりました。ありがとうございます。
guest

回答1

0

自己解決

hoshi-takanori様のおかげで解決できました。
深謝。

投稿2020/05/16 19:10

begginerpg

総合スコア10

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問