ReactJS Design Pattern ~Reducer Pattern~

・Reducer Pattern can be used when you have multiple states depending on complex logic. If you utilize this pattern, you update the state via a reducer function to update the state instead of updating the state directly. In the component, you dispatch an action type and then update the state.

import React, { useReducer } from 'react'
import { State, Action } from '@type/index'

const initialState = {
  count: 0,
}

const reducer = (state: State, action: Action) => {
  switch (action.type) {
    case 'increment':
      return { ...state, count: state.count + 1 }
    case 'decrement':
      return { ...state, count: state.count - 1 }
    default:
      return state
  }
}
export const Counter = () => {
  const [state, dispatch] = useReducer(reducer, initialState)
  return (
    <div>
      <p>カウント: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>Increase</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrease</button>
    </div>
  )
}