ReduxのcreateSliceについてわからなかったので調べた #React

Reduxを含めたReactプロジェクトに途中からジョインしました。
ですが現行のソースコードがまったくわからない...。

おおよその雰囲気は単語の端々をかいつまんで翻訳することで把握できましたが、
そもそもReduxやReactを深くは知らない。

ですので調べてきました！
ChatGPTがな！

reduxのcreateSliceについて教えて？

import { createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: 0,
  reducers: {
    increment: (state) => state + 1,
    decrement: (state) => state - 1,
    incrementByAmount: (state, action) => state + action.payload,
  },
});

export const { increment, decrement, incrementByAmount } = counterSlice.actions;
export default counterSlice.reducer;

createSliceは、Redux Toolkitの一部であり、ReduxのcreateReducerやcreateActionを組み合わせたものです。これにより、簡単にReduxのstoreの状態を更新するためのリデューサーとアクションを作成できます。

createSliceは、以下のように使用します。

javascriptCopy codeimport { createSlice } from '@reduxjs/toolkit';
import { createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: 0,
  reducers: {
    increment: (state) => state + 1,
    decrement: (state) => state - 1,
    incrementByAmount: (state, action) => state + action.payload,
  },
});

export const { increment, decrement, incrementByAmount } = counterSlice.actions;
export default counterSlice.reducer;

export const { increment, decrement, incrementByAmount } = counterSlice.actions;
export default counterSlice.reducer;

この例では、createSliceには3つの引数があります。

nameは、スライスの名前を表します。
initialStateは、スライスの初期状態を表します。
reducersは、スライスに関するアクションを定義するオブジェクトです。各アクションは、現在の状態を変更するための関数です。

上記の例では、3つのアクションが定義されています。incrementとdecrementアクションは、状態を1ずつ増減させるための単純な関数です。incrementByAmountアクションは、action.payloadで指定された値だけ状態を増やします。

最後に、createSliceは、アクションとリデューサーを含むオブジェクトを返します。このオブジェクトを使用して、Redux storeにスライスを追加することができます。また、アクションを直接エクスポートして、コンポーネント内で使用することもできます。

まとめると

sliceはReactでいうStateのうちの一つ
createSliceで作られたオブジェクトは操作された結果である「値」と「それに対する操作」と「初期値initialState」を持つ
「値に対する操作」はreducersで辞書形式でたくさんの関数がまとめられている

ReduxでAPI操作したい

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import axios from 'axios';

// APIリクエストを送信する非同期アクションを定義する
export const fetchData = createAsyncThunk('data/fetchData', async () => {
  const response = await axios.get('/api/data');
  return response.data;
});

// スライスを作成する
const dataSlice = createSlice({
  name: 'data',
  initialState: {
    items: [],
    loading: false,
    error: null,
  },
  reducers: {},
  extraReducers: {
    // リクエストが開始されたときの処理
    [fetchData.pending]: (state) => {
      state.loading = true;
    },
    // リクエストが成功したときの処理
    [fetchData.fulfilled]: (state, action) => {
      state.loading = false;
      state.items = action.payload;
    },
    // リクエストが失敗したときの処理
    [fetchData.rejected]: (state, action) => {
      state.loading = false;
      state.error = action.error.message;
    },
  },
});

// コンポーネントからAPIリクエストを送信するための関数を定義する
export const fetchAndStoreData = () => {
  return (dispatch) => {
    dispatch(fetchData());
  };
};

export default dataSlice.reducer;

APIとのデータ連携は、フロントエンドアプリケーションにとって非常に重要な要素です。Reduxを使うことで、APIとのデータ連携を効率的に行うことができます。

一般的に、ReduxアプリケーションでAPIとのデータ連携を行うには、以下の手順が必要です。

APIリクエストを送信するアクションを定義する
アクションがデータを取得した場合、ステートを更新するリデューサーを定義する
コンポーネントからアクションをディスパッチするための関数を定義する
Redux Thunkミドルウェアを使って非同期API呼び出しを実行する

以下は、例としてReduxのcreateSliceを使って、APIとのデータ連携を行うコードの一例です。

javascriptCopy codeimport { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import axios from 'axios';
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import axios from 'axios';

// APIリクエストを送信する非同期アクションを定義する
export const fetchData = createAsyncThunk('data/fetchData', async () => {
  const response = await axios.get('/api/data');
  return response.data;
});

// スライスを作成する
const dataSlice = createSlice({
  name: 'data',
  initialState: {
    items: [],
    loading: false,
    error: null,
  },
  reducers: {},
  extraReducers: {
    // リクエストが開始されたときの処理
    [fetchData.pending]: (state) => {
      state.loading = true;
    },
    // リクエストが成功したときの処理
    [fetchData.fulfilled]: (state, action) => {
      state.loading = false;
      state.items = action.payload;
    },
    // リクエストが失敗したときの処理
    [fetchData.rejected]: (state, action) => {
      state.loading = false;
      state.error = action.error.message;
    },
  },
});

// コンポーネントからAPIリクエストを送信するための関数を定義する
export const fetchAndStoreData = () => {
  return (dispatch) => {
    dispatch(fetchData());
  };
};

export default dataSlice.reducer;

export default dataSlice.reducer;

上記の例では、createAsyncThunk関数を使って非同期APIリクエストを送信するためのアクションfetchDataを定義し、extraReducersオブジェクトを使用してアクションに対応するリデューサーを定義しています。また、APIリクエストを送信するための関数fetchAndStoreDataを定義して、コンポーネントから呼び出すことができるようにしています。

このように、Reduxを使ってAPIとのデータ連携を行うことができます。

まとめると

extraReducersをつかって外部APIと非同期通信する関数を作成すればいい感じになる

extraReducersって何？

extraReducersは、他のスライスや外部のアクションに対して、Reduxのステートを更新するためのリデューサーを定義するために使用されます。extraReducers内で定義されたアクションに対するリデューサーは、通常のスライスのアクションと同じように、自動的に生成されたReduxのアクションクリエーターによってディスパッチされます。

簡単に言うと、非同期で外部APIを呼ぶときにいい感じにしてくれるってことだな！