React Redux toolkit 状態管理の基本的な使用例

src//
  |-- app//
  |    `-- store.js
  |-- features//
  |    `-- countSlice.js
  |-- App.js
  `-- index.js

npm install redux-redux @reduxjs/toolkit

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

const countSlice = createSlice({
    name: 'count',
    initialState: { count: 0 },
    reducers: {
        increment: (state, action) => {
            state.count++;
        },
        decrement: (state, action) => {
            state.count--;
        },
        multiplication: (state, action) => {
            state.count = state.count * action.payload;
        },
    },
});

export const selectCount = (state) => state.counter.count;

export const actions = countSlice.actions;

export default countSlice.reducer;

import { configureStore } from "@reduxjs/toolkit";
import countReducer from '../features/countSlice';

export const store = configureStore({
    reducer: {
        counter: countReducer,
    }
})

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

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

import { useSelector, useDispatch } from 'react-redux';
import { actions, selectCount } from './features/countSlice';

function App() {
  const count = useSelector(selectCount)

  const dispatch = useDispatch();

  const increment = () => {
    dispatch(actions.increment());
  }
  const decrement = () => {
    dispatch(actions.decrement());
  }

  const multiplication = () => {
    dispatch(actions.multiplication(2));
  }

  return (
    <div className="App">
      <p>count: {count}</p>
      <button onClick={increment} > + </button>
      <button onClick={decrement} > - </button>
      <button onClick={multiplication}> x2 </button>
    </div>
  );
}

export default App;