ReactHooks之使用useReducer代替redux

• redux用于在组件之间传递数据，组件之间共享数据
• 那么使用useReducer我们同样可以实现相应的功能
• 我们一般使用useContext和useReducer来实现redux的功能

组件

第一个组件

function ShowText() {
    return (
        <>
        <div style={{color:"blue"}}>字体的颜色为蓝色</div>
        </>
    )
}

export default ShowText

第二个组件

function Buttons(){
    return (
        <>
        <button>红色</button>
        <button>黄色</button>
        </>
    )
}

export default Buttons

父组件

import Buttons from './Buttons'
import ShowText from './ShowText'

function App() {

  return (
    <>
    <ShowText/>
    <Buttons/>
    </>
  )
}

export default App

效果

我们要实现的是点击红色，字体的颜色为红色，点击黄色，字体的颜色为黄色

实现redux功能

全局容器

我们要提供一个容器，就像redux一样，为组件提供信息，这里我们新建Colors.js来当做全局容器

import Buttons from './Buttons'
import ShowText from './ShowText'
import { Colors } from './Colors'

function App() {

  return (
    <Colors>
      <ShowText/>
      <Buttons/>
    </Colors>
  )
}

export default App

Colors.js

import {createContext, useReducer} from "react"


export const ColorContext = createContext({})
export const UPDATE_COLOR = "UPDATE_COLOR"
const reduce = (state,action) => {
    switch(action.type){
        case "UPDATE_COLOR":
            return action.color;
        default:
            return state;
    }
}

export const Colors = props => {
    const [color,dispatch] = useReducer(reduce,"blue")
    // 将状态和改变状态的方法放到容器中
    return (
        <ColorContext.Provider value={{color,dispatch}}>
            {props.children}
        </ColorContext.Provider>
    )
}

更改效果

使用状态

在ShowText组件中使用状态

import { useContext } from "react"
import { ColorContext } from "./Colors"

function ShowText() {
    const {color} = useContext(ColorContext)
    return (
        <>
        <div style={{color:color}}>字体的颜色为蓝色</div>
        </>
    )
}

export default ShowText

更改状态

更改状态主要使用dispatch方法

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

export default Buttons

当我们点击按钮的时候，发现字体的颜色就改变了