Redux初心者でも安心！Reducer内でアクションをディスパッチする完全ガイド

2024-04-02

ReactJS、Redux、Reducerにおけるアクションディスパッチについて

答え： はい、可能です。ただし、いくつかの注意点があります。

基本的な流れ

Reduxでは、状態管理は以下の流れで行われます。

コンポーネントは、アクションオブジェクトを作成してディスパッチします。
ストアはアクションを受け取り、該当するレデューサーに渡します。
レデューサーはアクションに基づいて状態を更新し、新しい状態を返します。
ストアは更新された状態を保持します。
コンポーネントはストアから最新の状態を取得し、レンダリングします。

Reducer内でアクションをディスパッチする

上記の基本的な流れに加え、Reducer内でアクションをディスパッチすることも可能です。これは、以下のような場合に役立ちます。

複数のReducer間で状態を連動させたい場合
複雑な処理を複数のReducerに分割したい場合

Reducer内でアクションをディスパッチする際には、以下の点に注意する必要があります。

無限ループに陥らないように注意する
アクションの副作用を考慮する
テストコードが複雑にならないように注意する

const reducer = (state, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return {
        ...state,
        count: state.count + 1
      };
    case 'DECREMENT':
      return {
        ...state,
        count: state.count - 1
      };
    default:
      return state;
  }
};

const dispatch = () => {
  // Reducer内でアクションをディスパッチ
  store.dispatch({
    type: 'INCREMENT'
  });
};

上記の例では、INCREMENTアクションがディスパッチされた際に、Reducer内でDECREMENTアクションをディスパッチしています。

まとめ

Reducer内でアクションをディスパッチすることは可能ですが、いくつかの注意点があります。上記の解説を参考に、状況に応じて適切に使用してください。

// ファイル: actions.js

export const INCREMENT = 'INCREMENT';
export const DECREMENT = 'DECREMENT';

export const increment = () => ({
  type: INCREMENT
});

export const decrement = () => ({
  type: DECREMENT
});

// ファイル: reducer.js

const initialState = {
  count: 0
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case INCREMENT:
      return {
        ...state,
        count: state.count + 1
      };
    case DECREMENT:
      return {
        ...state,
        count: state.count - 1
      };
    default:
      return state;
  }
};

export default reducer;

// ファイル: App.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { increment, decrement } from './actions';

class App extends Component {
  render() {
    const { count, increment, decrement } = this.props;
    return (
      <div>
        <h1>カウント: {count}</h1>
        <button onClick={increment}>+</button>
        <button onClick={decrement}>-</button>
      </div>
    );
  }
}

const mapStateToProps = state => ({
  count: state.count
});

const mapDispatchToProps = dispatch => ({
  increment: () => dispatch(increment()),
  decrement: () => dispatch(decrement())
});

export default connect(mapStateToProps, mapDispatchToProps)(App);

コードの説明

actions.js: アクションオブジェクトを定義するファイル
reducer.js: Reducerを定義するファイル
App.js: コンポーネントを定義するファイル

動作

ユーザーが+ボタンをクリックすると、incrementアクションがディスパッチされます。
incrementアクションは、Reducerに渡されます。
Reducerは、countプロパティを1増やして、新しい状態を返します。

case INCREMENT:
  return {
    ...state,
    count: state.count + 1
  };
  // ↓ Reducer内でDECREMENTアクションをディスパッチ
  store.dispatch({
    type: DECREMENT
  });

補足

上記はあくまで一例であり、状況に応じて様々な方法でReducer内でアクションをディスパッチすることができます。

Reducer内でアクションをディスパッチする他の方法

redux-thunkは、ミドルウェアの一種で、アクションディスパッチ関数を返すことができます。この関数は、dispatch関数とgetState関数を受け取り、非同期処理や他のアクションのディスパッチを実行できます。

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';

const reducer = (state, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return {
        ...state,
        count: state.count + 1
      };
    case 'DECREMENT':
      return {
        ...state,
        count: state.count - 1
      };
    default:
      return state;
  }
};

const store = createStore(reducer, applyMiddleware(thunk));

const incrementAsync = () => dispatch => {
  setTimeout(() => {
    dispatch({
      type: 'INCREMENT'
    });
  }, 1000);
};

store.dispatch(incrementAsync());

上記の例では、incrementAsyncというアクションクリエイター関数を定義しています。この関数は、dispatch関数を受け取り、1秒後にINCREMENTアクションをディスパッチします。

redux-sagaは、ジェネレータ関数を使って非同期処理や他のアクションのディスパッチを記述できるミドルウェアです。

import { createStore, applyMiddleware } from 'redux';
import createSagaMiddleware from 'redux-saga';

const reducer = (state, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return {
        ...state,
        count: state.count + 1
      };
    case 'DECREMENT':
      return {
        ...state,
        count: state.count - 1
      };
    default:
      return state;
  }
};

const sagaMiddleware = createSagaMiddleware();

const store = createStore(reducer, applyMiddleware(sagaMiddleware));

function* incrementAsync() {
  yield delay(1000);
  yield put({
    type: 'INCREMENT'
  });
}

sagaMiddleware.run(incrementAsync);