useReducer , Redux, Redux Toolkit (RTK)

import { useReducer } from 'react';

function counterReducer(state: number, action: { type: string }) {
  switch (action.type) {
    case 'increment':
      return state + 1;
    case 'decrement':
      return state - 1;
    default:
      return state;
  }
}

export default function Counter() {
  const [count, dispatch] = useReducer(counterReducer, 0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>เพิ่ม</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>ลด</button>
    </div>
  );
}

const [state, dispatch] = useReducer(reducerFunction, initialState);

type State = {
  count: number;
  showCount: boolean;
};

type Action =
  | { type: 'increment' }
  | { type: 'decrement' }
  | { type: 'reset' }
  | { type: 'toggle' };

function reducer(state: State, action: Action): State {
  switch (action.type) {
    case 'increment':
      return { ...state, count: state.count + 1 };
    case 'decrement':
      return { ...state, count: state.count - 1 };
    case 'reset':
      return { ...state, count: 0 };
    case 'toggle':
      return { ...state, showCount: !state.showCount };
    default:
      return state;
  }
}

import React, { useReducer } from 'react';

const initialState: State = {
  count: 0,
  showCount: true,
};

export default function CounterReducer() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <h2>useReducer แบบ Object State + TypeScript</h2>

      <button onClick={() => dispatch({ type: 'toggle' })}>
        {state.showCount ? 'ซ่อน' : 'แสดง'} ตัวเลข
      </button>

      {state.showCount && <p>Count: {state.count}</p>}

      <button onClick={() => dispatch({ type: 'increment' })}>เพิ่ม</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>ลด</button>
      <button onClick={() => dispatch({ type: 'reset' })}>รีเซ็ต</button>
    </div>
  );
}

npm install redux react-redux

// action types
export const INCREMENT = 'INCREMENT';
export const DECREMENT = 'DECREMENT';
export const RESET = 'RESET';

// action creators
export const increment = () => ({ type: INCREMENT });
export const decrement = () => ({ type: DECREMENT });
export const reset = () => ({ type: RESET });

import { INCREMENT, DECREMENT, RESET } from './actions';

const initialState = {
  count: 0,
};

export const counterReducer = (state = initialState, action) => {
  switch (action.type) {
    case INCREMENT:
      return { ...state, count: state.count + 1 };
    case DECREMENT:
      return { ...state, count: state.count - 1 };
    case RESET:
      return { ...state, count: 0 };
    default:
      return state;
  }
};

import { createStore } from 'redux';
import { counterReducer } from './reducer';

export const store = createStore(counterReducer);

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

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

import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement, reset } from './redux/actions';

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

  return (
    <div>
      <h1>Counter: {count}</h1>
      <button onClick={() => dispatch(increment())}>เพิ่ม</button>
      <button onClick={() => dispatch(decrement())}>ลด</button>
      <button onClick={() => dispatch(reset())}>รีเซ็ต</button>
    </div>
  );
}

npm install @reduxjs/toolkit react-redux

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

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

// สำหรับใช้ใน TypeScript
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

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

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

export const { increment, decrement, reset } = counterSlice.actions;
export default counterSlice.reducer;

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

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

import { useSelector, useDispatch } from 'react-redux';
import { RootState, AppDispatch } from './store';
import { increment, decrement, reset } from './counterSlice';

export default function App() {
  const count = useSelector((state: RootState) => state.counter.value);
  const dispatch: AppDispatch = useDispatch();

  return (
    <div>
      <h1>นับเลข: {count}</h1>
      <button onClick={() => dispatch(increment())}>เพิ่ม</button>
      <button onClick={() => dispatch(decrement())}>ลด</button>
      <button onClick={() => dispatch(reset())}>รีเซ็ต</button>
    </div>
  );
}