使用useReducer + useContext 代替 react-redux

一. 概述

在 React16.8推出之前溺职，我們使用react-redux并配合一些中間件，來對(duì)一些大型項(xiàng)目進(jìn)行狀態(tài)管理冯吓，React16.8推出后儡率，我們普遍使用函數(shù)組件來構(gòu)建我們的項(xiàng)目，React提供了兩種Hook來為函數(shù)組件提供狀態(tài)支持胖喳，一種是我們常用的useState,另一種就是useReducer, 其實(shí)從代碼底層來看useState實(shí)際上執(zhí)行的也是一個(gè)useReducer,這意味著useReducer是更原生的泡躯，你能在任何使用useState的地方都替換成使用useReducer.

Reducer的概念是伴隨著Redux的出現(xiàn)逐漸在JavaScript中流行起來的,useReducer從字面上理解這個(gè)是reducer的一個(gè)Hook，那么能否使用useReducer配合useContext 來代替react-redux來對(duì)我們的項(xiàng)目進(jìn)行狀態(tài)管理呢禀晓？答案是肯定的精续。

二. useReducer 與 useContext

1. useReducer

在介紹useReducer這個(gè)Hook之前坝锰，我們先來回顧一下Reducer粹懒，簡(jiǎn)單來說 Reducer是一個(gè)函數(shù)(state, action) => newState：它接收兩個(gè)參數(shù)，分別是當(dāng)前應(yīng)用的state和觸發(fā)的動(dòng)作action顷级，它經(jīng)過計(jì)算后返回一個(gè)新的state.來看一個(gè)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('存在這個(gè)了值了')
                    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

上面是個(gè)todoList的例子凫乖，其中reducer可以根據(jù)傳入的action類型（ACTION_TYPE.ADD_TODO、ACTION_TYPE.REMOVE_TODO弓颈、UPDATE_TODO）來計(jì)算并返回一個(gè)新的state帽芽。reducer本質(zhì)是一個(gè)純函數(shù)，沒有任何UI和副作用翔冀。接下來看下useReducer:

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

useReducer 接受兩個(gè)參數(shù)：第一個(gè)是上面我們介紹的reducer导街，第二個(gè)參數(shù)是初始化的state，返回的是個(gè)數(shù)組纤子，數(shù)組第一項(xiàng)是當(dāng)前最新的state搬瑰，第二項(xiàng)是dispatch函數(shù),它主要是用來dispatch不同的Action，從而觸發(fā)reducer計(jì)算得到對(duì)應(yīng)的state.

利用上面創(chuàng)建的reducer,看下如何使用useReducer這個(gè)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,會(huì)被認(rèn)為是只讀的 */}
            <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利用上面創(chuàng)建的todoReducer與初始狀態(tài)initState完成了初始化控硼。用戶觸發(fā)增加泽论、刪除、更新操作后卡乾，通過dispatch派發(fā)不類型的Action翼悴，reducer根據(jù)接收到的不同Action，調(diào)用各自邏輯幔妨，完成對(duì)state的處理后返回新的state鹦赎。

可以看到useReducer的使用邏輯，幾乎跟react-redux的使用方式相同误堡，只不過react-redux中需要我們利用actionCreator來進(jìn)行action的創(chuàng)建古话，以便利用Redux中間鍵(如redux-thunk)來處理一些異步調(diào)用。

那是不是可以使用useReducer來代替react-redux了呢埂伦？我們知道react-redux可以利用connect函數(shù)煞额，并且使用Provider來對(duì)<App />進(jìn)行了包裹，可以使任意組件訪問store的狀態(tài)。

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

如果想要useReducer到達(dá)類似效果膊毁，我們需要用到useContext這個(gè)Hook胀莹。

2. useContext

useContext顧名思義，它是以Hook的方式使用React Context婚温。先簡(jiǎn)單介紹 Context描焰。
Context設(shè)計(jì)目的是為了共享那些對(duì)于一個(gè)組件樹而言是“全局”的數(shù)據(jù),它提供了一種在組件之間共享值的方式，而不用顯式地通過組件樹逐層的傳遞props栅螟。

const value = useContext(MyContext);

useContext:接收一個(gè)context對(duì)象（React.createContext 的返回值）并返回該context的當(dāng)前值,當(dāng)前的 context值由上層組件中距離當(dāng)前組件最近的<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創(chuàng)建了context,然后用ThemeContext.Provider標(biāo)簽包裹需要進(jìn)行狀態(tài)共享的組件樹力图，在子組件中使用useContext獲取到value值進(jìn)行使用步绸。

利用useReducer、useContext這兩個(gè)Hook就可以實(shí)現(xiàn)對(duì)react-redux的替換了。

三. 代替方案

通過一個(gè)例子看下如何利用useReducer+useContext代替react-redux,實(shí)現(xiàn)下面的效果:

pic

react-redux實(shí)現(xiàn)

這里假設(shè)你已經(jīng)熟悉了react-redux的使用，如果對(duì)它不了解可以去 查看.使用它來實(shí)現(xiàn)上面的需求：

  • 首先項(xiàng)目中導(dǎo)入我們所需類庫后苹祟，創(chuàng)建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;

  • 創(chuàng)建reducer與actionCreator

    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('存在這個(gè)了值了')
                    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);  
       })
   }

}

最后我們?cè)诮M件中通過useSelector,useDispatch這兩個(gè)Hook來分別獲取state以及派發(fā)action：

const todoList = useSelector((state: RootState) => state.newTodo.todoList)
const dispatch = useDispatch()
......
useReducer + useContext 實(shí)現(xiàn)

為了實(shí)現(xiàn)修改顏色與字號(hào)的需求，在最開始的useReducer我們?cè)偬砑觾煞Naction類型刑桑，完成后的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: // 修改字號(hào)
            return {
                ...state,
                themeFontSize: payload
            }
        default:
            return state
    }
}
export default todoReducer

在父組件中創(chuàng)建Context,并將需要與子組件共享的數(shù)據(jù)傳遞給Context.Provider的Value prop

const initState: IStore = {
  todoList: [],
  themeColor: 'black',
  themeFontSize: 14
}
// 創(chuàng)建 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}>改變字號(hào)</button>
        </div>
      </div>
    </ThemeContext.Provider>
  )
}
export default memo(ReducerExamplePage)

然后在ListItem中使用const theme = useContext(ThemeContext); 獲取傳遞的顏色與字號(hào)，并進(jìn)行樣式綁定

    // 引入創(chuàng)建的context
    import { ThemeContext } from '../../ReducerExample/index'
    ...
    // 獲取傳遞的數(shù)據(jù)
    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結(jié)合useContext募舟，通過Context把state數(shù)據(jù)給組件樹中的所有組件使用 祠斧，而不用通過props添加回調(diào)函數(shù)的方式一層層傳遞,達(dá)到了數(shù)據(jù)共享的目的。

四. 總結(jié)

總體來說拱礁，相比react-redux而言琢锋，使用useReducer + userContext 進(jìn)行狀態(tài)管理更加簡(jiǎn)單，免去了導(dǎo)入各種狀態(tài)管理庫以及中間鍵的麻煩觅彰，也不需要再創(chuàng)建store和actionCreator吩蔑，對(duì)于新手來說，減輕了狀態(tài)管理的難度填抬。對(duì)于一些小型項(xiàng)目完全可以用它來代替react-redux烛芬，當(dāng)然一些大型項(xiàng)目普遍還是使用react-redux來進(jìn)行的狀態(tài)管理，所以深入學(xué)習(xí)Redux 也是很有必要的飒责。

一些參考：

React

React Redux

用useState還是用useReducer

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 人面猴
    序言：七十年代末赘娄，一起剝皮案震驚了整個(gè)濱河市，隨后出現(xiàn)的幾起案子宏蛉，更是在濱河造成了極大的恐慌遣臼，老刑警劉巖，帶你破解...
    沈念sama閱讀 206,378評(píng)論 6贊 481
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件拾并，死亡現(xiàn)場(chǎng)離奇詭異揍堰，居然都是意外死亡鹏浅，警方通過查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,356評(píng)論 2贊 382
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門屏歹，熙熙樓的掌柜王于貴愁眉苦臉地迎上來隐砸，“玉大人，你說我怎么就攤上這事蝙眶〖鞠＃” “怎么了？”我有些...
    開封第一講書人閱讀 152,702評(píng)論 0贊 342
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵幽纷，是天一觀的道長(zhǎng)式塌。 經(jīng)常有香客問我，道長(zhǎng)友浸，這世上最難降的妖魔是什么峰尝？ 我笑而不...
    開封第一講書人閱讀 55,259評(píng)論 1贊 279
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮尾菇，結(jié)果婚禮上境析，老公的妹妹穿的比我還像新娘囚枪。我一直安慰自己派诬，他們只是感情好，可當(dāng)我...
    茶點(diǎn)故事閱讀 64,263評(píng)論 5贊 371
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布链沼。 她就那樣靜靜地躺著默赂，像睡著了一般。 火紅的嫁衣襯著肌膚如雪括勺。 梳的紋絲不亂的頭發(fā)上缆八，一...
    開封第一講書人閱讀 49,036評(píng)論 1贊 285
  • 城市分裂傳說
    那天，我揣著相機(jī)與錄音疾捍，去河邊找鬼奈辰。 笑死，一個(gè)胖子當(dāng)著我的面吹牛乱豆，可吹牛的內(nèi)容都是我干的奖恰。 我是一名探鬼主播，決...
    沈念sama閱讀 38,349評(píng)論 3贊 400
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼宛裕，長(zhǎng)吁一口氣：“原來是場(chǎng)噩夢(mèng)啊……” “哼瑟啃！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起揩尸，我...
    開封第一講書人閱讀 36,979評(píng)論 0贊 259
  • 萬榮殺人案實(shí)錄
    序言：老撾萬榮一對(duì)情侶失蹤蛹屿，失蹤者是張志新（化名）和其女友劉穎，沒想到半個(gè)月后岩榆，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體错负，經(jīng)...
    沈念sama閱讀 43,469評(píng)論 1贊 300
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡坟瓢，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,938評(píng)論 2贊 323
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了犹撒。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片载绿。...
    茶點(diǎn)故事閱讀 38,059評(píng)論 1贊 333
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡，死狀恐怖油航，靈堂內(nèi)的尸體忽然破棺而出崭庸，到底是詐尸還是另有隱情，我是刑警寧澤谊囚，帶...
    沈念sama閱讀 33,703評(píng)論 4贊 323
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布怕享，位于F島的核電站，受9級(jí)特大地震影響镰踏，放射性物質(zhì)發(fā)生泄漏函筋。R本人自食惡果不足惜，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,257評(píng)論 3贊 307
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一奠伪、第九天 我趴在偏房一處隱蔽的房頂上張望跌帐。 院中可真熱鬧，春花似錦绊率、人聲如沸谨敛。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,262評(píng)論 0贊 19
  • 一樁弒父案滤否，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽脸狸。三九已至，卻和暖如春藐俺，著一層夾襖步出監(jiān)牢的瞬間炊甲，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,485評(píng)論 1贊 262
  • 情欲美人皮
    我被黑心中介騙來泰國(guó)打工欲芹， 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留卿啡，地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 45,501評(píng)論 2贊 354
  • 代替公主和親
    正文 我出身青樓菱父，卻偏偏與公主長(zhǎng)得像颈娜，于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子滞伟，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,792評(píng)論 2贊 345

推薦閱讀更多精彩內(nèi)容