【React】Reduxで状態管理してみた【Typescript】

この記事はReduxでReactアプリの状態管理をする方法を解説しています。

こんにちは！らびです。今回はReduxに関する記事です。

Reactアプリの状態管理について、一緒に勉強していきましょう。

storeとprovider
slice
component
実行
まとめ
参考

storeとprovider

まずはstoreの作成です。@reduxjs/toolkitからインポートしたconfigureStoreを使って後述するcounterSliceとstoreを紐づけています。

import { configureStore } from '@reduxjs/toolkit'
import counterReducer from './counterSlice'

export default configureStore({
  reducer: {
    counter: counterReducer,
  },
})

ProviderでAppをラップしてるジョ。

これによって各ReactコンポーネントからcounterSliceを利用できるんですね。

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import store from './components/redux/store'
import { Provider } from 'react-redux'
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

slice

sliceでは状態と操作を定義します。今回はcounterとcounterの値を増減させるincrement、decrementをそれぞれ定義しています。

import { createSlice, Slice } from '@reduxjs/toolkit'

export const counterSlice :Slice = createSlice({
  name: 'counter',
  initialState: {
    value: 0,
  },
  reducers: {
    increment: (state) => {
      state.value += 1
    },
    decrement: (state) => {
      state.value -= 1
    },
  },
})

export const { increment, decrement } = counterSlice.actions

export const selectCount = (state: any) => {return state.counter.value};

export default counterSlice.reducer

component

ReactコンポーネントからcounterSliceを利用する方法です。decrement、incrementはcounterSliceから直接インポートして利用します。一方でcountの値はselectCountをuseSelectorに渡して取得しています。

import React from "react";
import { useSelector, useDispatch } from 'react-redux'
import { decrement, increment, selectCount } from '../components/redux/counterSlice'
import ResponsiveDrawer from '../components/layout/ResponsiveDrawer';

const Home9 = () => {
  const count = useSelector(selectCount);
  const dispatch = useDispatch();
  
  return (
    <ResponsiveDrawer>
    <div>
      <div>
        <button
          aria-label="Increment value"
          onClick={(state) => dispatch(increment(state))}
        >+</button>
        <span>{count}</span>
        <button
          aria-label="Decrement value"
          onClick={(state) => dispatch(decrement(state))}
        >-</button>
      </div>
    </div>
    </ResponsiveDrawer>
  );
}

export default Home9;