使用useReducer + useContext 代替 react-redux

一. 概述

在 React16.8推出之前,我们使用react-redux并配合一些中间件,来对一些大型项目进行状态管理,React16.8推出后,我们普遍使用函数组件来构建我们的项目,React提供了两种Hook来为函数组件提供状态支持,一种是我们常用的useState,另一种就是useReducer, 其实从代码底层来看useState实际上执行的也是一个useReducer,这意味着useReducer是更原生的,你能在任何使用useState的地方都替换成使用useReducer.

Reducer的概念是伴随着Redux的出现逐渐在JavaScript中流行起来的,useReducer从字面上理解这个是reducer的一个Hook,那么能否使用useReducer配合useContext 来代替react-redux来对我们的项目进行状态管理呢?答案是肯定的。

二. useReducer 与 useContext

1. useReducer

在介绍useReducer这个Hook之前,我们先来回顾一下Reducer,简单来说 Reducer是一个函数(state, action) => newState:它接收两个参数,分别是当前应用的state和触发的动作action,它经过计算后返回一个新的state.来看一个todoList的例子:

export interface ITodo {
    id: number
    content: string
    complete: boolean
}

export interface IStore {
    todoList: ITodo[],
}

export interface IAction {
    type: string,
    payload: any
}

export enum ACTION_TYPE {
    ADD_TODO = 'addTodo',
    REMOVE_TODO = 'removeTodo',
    UPDATE_TODO = 'updateTodo',
}

import { ACTION_TYPE, IAction, IStore, ITodo } from "./type";

const todoReducer = (state: IStore, action: IAction): IStore => {
    const { type, payload } = action
    switch (type) {
        case ACTION_TYPE.ADD_TODO: //增加
            if (payload.length > 0) {
                const isExit = state.todoList.find(todo => todo.content === payload)
                if (isExit) {
                    alert('存在这个了值了')
                    return state
                }
                const item = {
                    id: new Date().getTime(),
                    complete: false,
                    content: payload
                }
                return {
                    ...state,
                    todoList: [...state.todoList, item as ITodo]
                }
            }
            return state
        case ACTION_TYPE.REMOVE_TODO:  // 删除 
            return {
                ...state,
                todoList: state.todoList.filter(todo => todo.id !== payload)
            }
        case ACTION_TYPE.UPDATE_TODO: // 更新
            return {
                ...state,
                todoList: state.todoList.map(todo => {
                    return todo.id === payload ? {
                        ...todo,
                        complete: !todo.complete
                    } : {
                        ...todo
                    }
                })
            }
        default:
            return state
    }
}
export default todoReducer

上面是个todoList的例子,其中reducer可以根据传入的action类型(ACTION_TYPE.ADD_TODO、ACTION_TYPE.REMOVE_TODO、UPDATE_TODO)来计算并返回一个新的state。reducer本质是一个纯函数,没有任何UI和副作用。接下来看下useReducer:

 const [state, dispatch] = useReducer(reducer, initState);

useReducer 接受两个参数:第一个是上面我们介绍的reducer,第二个参数是初始化的state,返回的是个数组,数组第一项是当前最新的state,第二项是dispatch函数,它主要是用来dispatch不同的Action,从而触发reducer计算得到对应的state.

利用上面创建的reducer,看下如何使用useReducer这个Hook:

const initState: IStore = {
  todoList: [],
  themeColor: 'black',
  themeFontSize: 16
}

const ReducerExamplePage: React.FC = (): ReactElement => {
  const [state, dispatch] = useReducer(todoReducer, initState)
  const inputRef = useRef<HTMLInputElement>(null);

  const addTodo = () => {
    const val = inputRef.current!.value.trim()
    dispatch({ type: ACTION_TYPE.ADD_TODO, payload: val })
    inputRef.current!.value = ''
  }
  
  const removeTodo = useCallback((id: number) => {
    dispatch({ type: ACTION_TYPE.REMOVE_TODO, payload: id })
  }, [])

  const updateTodo = useCallback((id: number) => {
    dispatch({ type: ACTION_TYPE.UPDATE_TODO, payload: id })
  }, [])

  return (
    <div className="example" style={{ color: state.themeColor, fontSize: state.themeFontSize }}>
      ReducerExamplePage
      <div>
        <input type="text" ref={inputRef}></input>
        <button onClick={addTodo}>增加</button>
        <div className="example-list">
          {
            state.todoList && state.todoList.map((todo: ITodo) => {
              return (
                <ListItem key={todo.id} todo={todo} removeTodo={removeTodo} updateTodo={updateTodo} />
              )
            })
          }
        </div>
      </div>
    </div>
  )
}
export default ReducerExamplePage

ListItem.tsx

import React, { ReactElement } from 'react';
import { ITodo } from '../typings';

interface IProps {
    todo:ITodo,
    removeTodo: (id:number) => void,
    updateTodo: (id: number) => void
}
const  ListItem:React.FC<IProps> = ({
    todo,
    updateTodo,
    removeTodo
}) : ReactElement => {
    const {id, content, complete} = todo
    return (
        <div> 
            {/* 不能使用onClick,会被认为是只读的 */}
            <input type="checkbox" checked={complete} onChange = {() => updateTodo(id)}></input>
            <span style={{textDecoration:complete?'line-through' : 'none'}}>
                {content}
            </span>
            <button onClick={()=>removeTodo(id)}>
                删除
            </button>
        </div>
    );
}
export default ListItem;

useReducer利用上面创建的todoReducer与初始状态initState完成了初始化。用户触发增加、删除、更新操作后,通过dispatch派发不类型的Actionreducer根据接收到的不同Action,调用各自逻辑,完成对state的处理后返回新的state。

可以看到useReducer的使用逻辑,几乎跟react-redux的使用方式相同,只不过react-redux中需要我们利用actionCreator来进行action的创建,以便利用Redux中间键(如redux-thunk)来处理一些异步调用。

那是不是可以使用useReducer来代替react-redux了呢?我们知道react-redux可以利用connect函数,并且使用Provider来对<App />进行了包裹,可以使任意组件访问store的状态。

 <Provider store={store}>
   <App />
 </Provider>

如果想要useReducer到达类似效果,我们需要用到useContext这个Hook。

2. useContext

useContext顾名思义,它是以Hook的方式使用React Context。先简单介绍 Context
Context设计目的是为了共享那些对于一个组件树而言是“全局”的数据,它提供了一种在组件之间共享值的方式,而不用显式地通过组件树逐层的传递props

const value = useContext(MyContext);

useContext:接收一个context对象(React.createContext 的返回值)并返回该context的当前值,当前的 context值由上层组件中距离当前组件最近的<MyContext.Provider>value prop 决定。来看官方给的例子:

const themes = {
  light: {
    foreground: "#000000",
    background: "#eeeeee"
  },
  dark: {
    foreground: "#ffffff",
    background: "#222222"
  }
};

const ThemeContext = React.createContext(themes.light);

function App() {
  return (
    <ThemeContext.Provider value={themes.dark}>
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar(props) {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return (
    <button style={{ background: theme.background, color: theme.foreground }}>
      I am styled by theme context!
    </button>
  );
}

上面的例子,首先利用React.createContext创建了context,然后用ThemeContext.Provider标签包裹需要进行状态共享的组件树,在子组件中使用useContext获取到value值进行使用。

利用useReduceruseContext这两个Hook就可以实现对react-redux的替换了。

三. 代替方案

通过一个例子看下如何利用useReducer+useContext代替react-redux,实现下面的效果:

pic

react-redux实现

这里假设你已经熟悉了react-redux的使用,如果对它不了解可以去 查看.使用它来实现上面的需求:

  • 首先项目中导入我们所需类库后,创建Store

    Store/index.tsx

    import { createStore,compose,applyMiddleware } from 'redux';
    import reducer from './reducer';
    import thunk from 'redux-thunk';// 配置 redux-thunk
    
    const composeEnhancers = compose;
    const store = createStore(reducer,composeEnhancers(
        applyMiddleware(thunk)// 配置 redux-thunk
    ));
    export type RootState = ReturnType<typeof store.getState>
    export default store;
    
  • 创建reduceractionCreator

    reducer.tsx

    import { ACTION_TYPE, IAction, IStore, ITodo } from "../../ReducerExample/type";
    
    const defaultState:IStore = {
        todoList:[],
        themeColor: '',
        themeFontSize: 14
    };
    const todoReducer = (state: IStore = defaultState, action: IAction): IStore => {
        const { type, payload } = action
        switch (type) {
            case ACTION_TYPE.ADD_TODO: // 新增
                if (payload.length > 0) {
                    const isExit = state.todoList.find(todo => todo.content === payload)
                    if (isExit) {
                        alert('存在这个了值了')
                        return state
                    }
                    const item = {
                        id: new Date().getTime(),
                        complete: false,
                        content: payload
                    }
                    return {
                        ...state,
                        todoList: [...state.todoList, item as ITodo]
                    }
                }
                return state
            case ACTION_TYPE.REMOVE_TODO:  // 删除 
                return {
                    ...state,
                    todoList: state.todoList.filter(todo => todo.id !== payload)
                }
            case ACTION_TYPE.UPDATE_TODO: // 更新
                return {
                    ...state,
                    todoList: state.todoList.map(todo => {
                        return todo.id === payload ? {
                            ...todo,
                            complete: !todo.complete
                        } : {
                            ...todo
                        }
                    })
                }
            case ACTION_TYPE.CHANGE_COLOR:
                return {
                    ...state,
                    themeColor: payload
                }
            case ACTION_TYPE.CHANGE_FONT_SIZE:
                return {
                    ...state,
                    themeFontSize: payload
                }
            default:
                return state
        }
    }
    export default todoReducer
    

    actionCreator.tsx

    import {ACTION_TYPE, IAction } from "../../ReducerExample/type"
    import { Dispatch } from "redux";
    
    export const addCount = (val: string):IAction => ({
       type: ACTION_TYPE.ADD_TODO,
       payload:val
    })
    export const removeCount = (id: number):IAction => ({
       type: ACTION_TYPE.REMOVE_TODO,
       payload:id
    })
    export const upDateCount = (id: number):IAction => ({
       type: ACTION_TYPE.UPDATE_TODO,
       payload:id
    })
    export const changeThemeColor = (color: string):IAction => ({
       type: ACTION_TYPE.CHANGE_COLOR,
       payload:color
    })
    export const changeThemeFontSize = (fontSize: number):IAction => ({
       type: ACTION_TYPE.CHANGE_FONT_SIZE,
       payload:fontSize
    })
    export const asyncAddCount = (val: string) => {
       console.log('val======',val);
    
       return (dispatch:Dispatch) => {
           Promise.resolve().then(() => {
               setTimeout(() => {
                   dispatch(addCount(val))
                }, 2000);  
           })
       }
    
    }
    

最后我们在组件中通过useSelector,useDispatch这两个Hook来分别获取state以及派发action

const todoList = useSelector((state: RootState) => state.newTodo.todoList)
const dispatch = useDispatch()
......
useReducer + useContext 实现

为了实现修改颜色与字号的需求,在最开始的useReducer我们再添加两种action类型,完成后的reducer:

const todoReducer = (state: IStore, action: IAction): IStore => {
    const { type, payload } = action
    switch (type) {
        ...
        case ACTION_TYPE.CHANGE_COLOR: // 修改颜色
            return {
                ...state,
                themeColor: payload
            }
        case ACTION_TYPE.CHANGE_FONT_SIZE: // 修改字号
            return {
                ...state,
                themeFontSize: payload
            }
        default:
            return state
    }
}
export default todoReducer

在父组件中创建Context,并将需要与子组件共享的数据传递给Context.ProviderValue prop

const initState: IStore = {
  todoList: [],
  themeColor: 'black',
  themeFontSize: 14
}
// 创建 context
export const ThemeContext = React.createContext(initState);

const ReducerExamplePage: React.FC = (): ReactElement => {
  ...
  
  const changeColor = () => {
    dispatch({ type: ACTION_TYPE.CHANGE_COLOR, payload: getColor() })
  }

  const changeFontSize = () => {
    dispatch({ type: ACTION_TYPE.CHANGE_FONT_SIZE, payload: 20 })
  }

  const getColor = (): string => {
    const x = Math.round(Math.random() * 255);
    const y = Math.round(Math.random() * 255);
    const z = Math.round(Math.random() * 255);
    return 'rgb(' + x + ',' + y + ',' + z + ')';
  }

  return (
    // 传递state值
    <ThemeContext.Provider value={state}>
      <div className="example">
        ReducerExamplePage
        <div>
          <input type="text" ref={inputRef}></input>
          <button onClick={addTodo}>增加</button>
          <div className="example-list">
            {
              state.todoList && state.todoList.map((todo: ITodo) => {
                return (
                  <ListItem key={todo.id} todo={todo} removeTodo={removeTodo} updateTodo={updateTodo} />
                )
              })
            }
          </div>
          <button onClick={changeColor}>改变颜色</button>
          <button onClick={changeFontSize}>改变字号</button>
        </div>
      </div>
    </ThemeContext.Provider>
  )
}
export default memo(ReducerExamplePage)

然后在ListItem中使用const theme = useContext(ThemeContext); 获取传递的颜色与字号,并进行样式绑定

    // 引入创建的context
    import { ThemeContext } from '../../ReducerExample/index'
    ...
    // 获取传递的数据
    const theme = useContext(ThemeContext);
     
    return (
        <div>
            <input type="checkbox" checked={complete} onChange={() => updateTodo(id)} style={{ color: theme.themeColor, fontSize: theme.themeFontSize }}></input>
            <span style={{ textDecoration: complete ? 'line-through' : 'none', color: theme.themeColor, fontSize: theme.themeFontSize }}>
                {content}
            </span>
            <button onClick={() => removeTodo(id)} style={{ color: theme.themeColor, fontSize: theme.themeFontSize }}>
                删除
            </button>
        </div>
    );

可以看到在useReducer结合useContext,通过Contextstate数据给组件树中的所有组件使用 ,而不用通过props添加回调函数的方式一层层传递,达到了数据共享的目的。

四. 总结

总体来说,相比react-redux而言,使用useReducer + userContext 进行状态管理更加简单,免去了导入各种状态管理库以及中间键的麻烦,也不需要再创建storeactionCreator,对于新手来说,减轻了状态管理的难度。对于一些小型项目完全可以用它来代替react-redux,当然一些大型项目普遍还是使用react-redux来进行的状态管理,所以深入学习Redux 也是很有必要的。

一些参考:

React

React Redux

用useState还是用useReducer

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,425评论 4 361
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,058评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,186评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,848评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,249评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,554评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,830评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,536评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,239评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,505评论 2 244
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,004评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,346评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,999评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,060评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,821评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,574评论 2 271
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,480评论 2 267

推荐阅读更多精彩内容