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

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

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

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

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

或いは異なるステートを２つ同時に更新するような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

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

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