React Hooks 中 useReducer 的介绍

简介

• 在JavaScript中的reducer是一个函数，接收两个参数，一个是状态，一个用来控制业务逻辑的判断参数。

useReducer的使用

• 用useReducer实现计数器的加减双向操作

  import React, { useReducer } from 'react';
  
  function ReducerDemo(){
      const [ count , dispatch ] =useReducer((state,action)=>{
          switch(action){
              case 'add':
                  return state+1
              case 'sub':
                  return state-1
              default:
                  return state
          }
      },0)
      return (
         <div>
             <h2>现在的分数是{count}</h2>
             <button onClick={()=>dispatch('add')}>Increment</button>
             <button onClick={()=>dispatch('sub')}>Decrement</button>
         </div>
      )
  
  }
  
  export default ReducerDemo
  

useReducer代替Redux小案例

• 编写颜色共享共享组件color.js

  import React, { createContext,useReducer } from 'react';
  
  export const ColorContext = createContext({})
  
  export const UPDATE_COLOR = "UPDATE_COLOR"
  
  const reducer= (state,action)=>{
      switch(action.type){
          case UPDATE_COLOR:
              return action.color
          default:
              return state
      }
  }
  
  export const Color = props=>{
      const [color, dispatch]=useReducer(reducer,'blue')
      return (
          <ColorContext.Provider value={{color,dispatch}}>
              {props.children}
          </ColorContext.Provider>
      )
  }
  

• 建立showArea.js文件

  import React , { useContext } from 'react';
  import { ColorContext } from './color';
  
  function ShowArea(){
      const {color} = useContext(ColorContext)
      return (<div style={{color:color}}>字体颜色为{color}</div>)
  
  }
  
  export default ShowArea
  

• 建立Buttons.js文件

  import React ,{useContext} from 'react';
  import {ColorContext,UPDATE_COLOR} from './color'
  
  function Buttons(){
      const { dispatch } = useContext(ColorContext)
      return (
          <div>
              <button onClick={()=>{dispatch({type:UPDATE_COLOR,color:"red"})}}>红色</button>
              <button onClick={()=>{dispatch({type:UPDATE_COLOR,color:"yellow"})}}>黄色</button>
          </div>
      )
  }
  
  export default Buttons
  

• 组合ShowArea和Buttons的Example6.js文件

  import React, { useReducer } from 'react';
  import ShowArea from './ShowArea';
  import Buttons from './Buttons';
  import { Color } from './color';   //引入Color组件
  
  function Example6(){
      return (
          <div>
              <Color>
                  <ShowArea />
                  <Buttons />
              </Color>
  
          </div>
      )
  }
  
  export default Example6