Hooks - useReducer 代替 redux

我们用 useReducer 来模拟 redux

首先我们要实现一个组件，这个组件可以通过点击 button 来控制文字的颜色

ShowArea.js

import React from 'react';

function ShowArea() {
    return (
        <div style={{color: green}}>This is a paragraph of green text</div>
    )
}

export default ShowArea;

Buttons.js

import React from 'react';

function Buttons() {
    return (
        <div>
            <button>Blue</button>
            <button>Green</button>
        </div>
    )
}

export default Buttons;

现在页面上是这样的：

现在文字颜色是不变的，在 ShowArea 中需要拿到 color 值

组件中传值，需要用到 useContext

我门给 Buttons 和 ShowArea 创建一个 parent 组件 Color

在 parent 组件 Color 中需要 create 一个 context

Color.js

export const ColorContext = createContext({});

function Color(props) {
    return (
        <ColorContext.Provider value={{color: "green"}}>
             {props.children}
        </ColorContext.Provider>
    )
}

在子组件 ShowArea 中需要 use context

ShowArea.js

function ShowArea() {
    const { color } = useContext(ColorContext);

    return (
        <p style={{ color: color }}>This is a paragraph of green text</p>
    )
}

在点击 button 的时候需要设置 color，也就是需要 state 的一个转换

这时候需要用到 useReducer，然后将 action 传递给子组件 Buttons

export const ColorContext = createContext({});

export const UPDATE_STATE = "UPDATE_STATE";

const reducer = (state, action) => {
    if (action.type === UPDATE_STATE) {
        return action.color;
    }
    return state;
}

function Color(props) {
    const [color, dispatch] = useReducer(reducer, "yellow");
    return (
        <ColorContext.Provider value={{color, dispatch}}>
             {props.children}
        </ColorContext.Provider>
    )
}

子组件 Buttons 里面拿到 dispatch，也就是 dispatch

然后通过 dispatch 做一个状态的转换

function Buttons() {
    const { dispatch } = useContext(ColorContext)
    return (
        <div>
            <p><button onClick={() => { dispatch({ type: UPDATE_STATE, color: "blue" }) }}>Blue</button></p>
            <p><button onClick={() => { dispatch({ type: UPDATE_STATE, color: "green" })}}>Green</button></p>
        </div>
    )
}

Reducer 的功能是做状态转换，然后返回一个更新的状态，和一个状态转换的函数

做状态转换的逻辑是在 Buttons 里面，所以 Buttons 需要状态转换函数 dispatch

状态显示的部分在 ShowAreas 里面，所以 ShowAreas 需要每次更新的 state 也就是 color

我们需要一个 parent component 将 color 和 dispatch 传递给子组件 Buttons 和 ShowAreas，这个 parent component 就是 Color

所以，在 Color 里面通过 useReducer 拿到所需要的变量，然后通过 useContext 传递变量值，这个功能就实现了