Building a Full Advanced React State Management System (Context + Reducer)

State management là một vấn đề lớn trong React.

Chúng ta sẽ xây dựng global state bằng:

• Context API
• useReducer
• Custom Hooks

1. Create Context

import {createContext} from "react"

export const AppContext = createContext()

2. Reducer

export const reducer=(state,action)=>{

 switch(action.type){

  case "ADD_TODO":
   return{
    ...state,
    todos:[...state.todos,action.payload]
   }

  default:
   return state

 }

}

3. Provider

import {useReducer} from "react"
import {AppContext} from "./context"
import {reducer} from "./reducer"

const initialState={
 todos:[]
}

export function AppProvider({children}){

 const [state,dispatch]=useReducer(reducer,initialState)

 return(
  <AppContext.Provider value={{state,dispatch}}>
   {children}
  </AppContext.Provider>
 )

}

4. Custom Hook

import {useContext} from "react"
import {AppContext} from "./context"

export const useAppContext=()=>{

 return useContext(AppContext)

}

5. Using Global State

import {useAppContext} from "./useAppContext"

function Todo(){

 const {state,dispatch}=useAppContext()

 const addTodo=()=>{

  dispatch({
   type:"ADD_TODO",
   payload:"Learn React"
  })

 }

 return(
  <div>

   <button onClick={addTodo}>
    Add
   </button>

   {state.todos.map(todo=>(
    <p>{todo}</p>
   ))}

  </div>
 )

}

YouTube Tutorial

https://www.youtube.com/watch?v=5LrDIWkK_Bc