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

src//
  |-- store//
  |    `-- index.js
  |-- App.js
  `-- index.js

npm install redux react-redux

import { legacy_createStore } from 'redux';

const initialState = { count: 0 };

const reducer = (state = initialState, action) => {
    switch (action.type) {
        case 'inc':
            return { count: state.count + 1 }
        case 'dec':
            return { count: state.count - 1 }
        case 'multi':
            return { count: state.count * action.payload }
        default:
            return state;
    }
}

export const store = legacy_createStore(reducer);

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 './store';

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

import { useSelector, useDispatch } from 'react-redux';

function App() {
  const count = useSelector((state) => state.count)
  const dispatch = useDispatch();

  const increment = () => {
    dispatch({ type: 'inc' });
  }

  const decrement = () => {
    dispatch({ type: 'dec' });
  }

  const multiplication = () => {
    dispatch({ type: 'multi', payload: 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;