Redux Toolkitでのスライスの使用方法

スライスの作成: Redux Toolkitでは、createSlice関数を使用してスライスを作成します。以下は、カウンターのスライスを作成する例です。

import { createSlice } from '@reduxjs/toolkit';
const counterSlice = createSlice({
  name: 'counter',
  initialState: 0,
  reducers: {
    increment: state => state + 1,
    decrement: state => state - 1,
    reset: () => 0,
  },
});
export const { increment, decrement, reset } = counterSlice.actions;
export default counterSlice.reducer;

スライスの使用: スライスを使用するためには、ReduxのconfigureStore関数を使用してストアを作成する必要があります。以下は、スライスを使用してカウンターの状態を管理するストアの例です。

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';
const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});
export default store;

コンポーネントでの使用: 作成したスライスとストアをReactコンポーネントで使用することができます。以下は、カウンターコンポーネントの例です。

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement, reset } from './counterSlice';
const Counter = () => {
  const count = useSelector(state => state.counter);
  const dispatch = useDispatch();
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
      <button onClick={() => dispatch(reset())}>Reset</button>
    </div>
  );
};
export default Counter;

これらのコード例を使用することで、Redux Toolkitを活用してスライスを定義し、アプリケーションの状態を効果的に管理することができます。スライスを使用することで、アプリケーションのさまざまな部分の状態を独立して更新することができ、コードの可読性と保守性を向上させることができます。