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> ); }