1.基本使用

  1. import React,{useReducer}from 'react'
  3. // eslint-disable-next-line import/no-anonymous-default-export
  4. export default ()=>{
  5.   //创建一个reducer
  6. const [count,dispatch]=useReducer((state,action)=>{
  7. switch (action) {
  8.     case 'add':
  9.     return state+1;
  10.     case 'sub':
  11.         return state>0?state-1:0
  12.     default:
  13.       return state
  14. }
  15. },0)
  16. return(
  17.     <>
  18.        <h1> 这个值是：{count}</h1>
  19.        <button onClick={()=>dispatch('add')}>点击加一</button>
  20.        <button onClick={()=>dispatch('sub')}>点击减一</button>
  21.     </>
  22. )
  23. }

2.案例

  1. //修改颜色/Color.jsx
  2. import React,{createContext,useReducer}from 'react'
  4. export const ChangeColor=createContext({})
  6. export const UPDATECOLOR='UPDATECOLOR'
  8. const reducer=(state,action)=>{
  9.     switch (action.type) {
  10.         case UPDATECOLOR:
  12.           return action.color
  14.         default:
  15.             return state
  16.     }
  18. }
  19. // eslint-disable-next-line import/no-anonymous-default-export
  20. export const Colors= (props)=>{
  21.     const [color,dispatch]=useReducer(reducer,'blue')
  22. return(
  23.     <>
  24.  <ChangeColor.Provider value={{color,dispatch}}>
  25.  {   props.children}
  26.  </ChangeColor.Provider>
  27.     </>
  28. )
  29. }
  1. //content.jsx
  2. import React from 'react'
  3. import Buttons from './Buttons'
  4. import Txt from './Txt'
  5. import { Colors } from './Colors'
  6. // eslint-disable-next-line import/no-anonymous-default-export
  7. export default ()=>{
  8. return(
  9.     <>
  10.     {/* 需要使用color组件将其他俩个组件包裹，共享数据 */}
  11.     <Colors>
  12.     <Txt />
  13. <Buttons />
  14.     </Colors>
  15.     </>
  16. )
  17. }
  1. //Txt.jsx
  2. import React,{useContext}from 'react'
  3. import { ChangeColor } from './Colors'
  5. // eslint-disable-next-line import/no-anonymous-default-export
  6. export default ()=>{
  7.     let {color}=useContext(ChangeColor)
  9. return(
  10.     <>
  11.     <h1 style={{color:color}}>这行文字的颜色是:{color}</h1>
  12.     </>
  13. )
  14. }
  1. Buttons.jsx
  2. //将dispatch分发出去，在外部传入action
  3. import React,{useContext} from 'react'
  4. import {ChangeColor,UPDATECOLOR} from "./Colors"
  7. // eslint-disable-next-line import/no-anonymous-default-export
  8. export default ()=>{
  9. const {dispatch}=useContext(ChangeColor)
  10. return(
  11.     <>
  12.        <button style={{background:'#00ffff',color:'#fff'}} onClick={()=>dispatch({type:UPDATECOLOR,color:'red'})}>修改颜色是红色</button>
  13.        <button style={{background:'#00ff00',color:'#fff'}} onClick={()=>dispatch({type:UPDATECOLOR,color:'yellow'})}>修改颜色是黄色</button>
  14.     </>
  15. )
  16. }