老生常談的 Redux
(????)??嗨，我是你穩(wěn)定更新、干貨賊多的勾勾。
Redux 官方對(duì)它的定義是 JavaScript 應(yīng)用程序的可預(yù)測(cè)狀態(tài)容器。也就是說(shuō)，我們?cè)诮o一個(gè)值的時(shí)候，對(duì)于這個(gè)值的結(jié)果是可預(yù)測(cè)的。
Redux 提供了一個(gè)特有的 api 叫 createStore()。從字面意思就能感受到，這是一個(gè)創(chuàng)建 store 的方法。
對(duì)于 store ，它有四個(gè)重點(diǎn)知識(shí)：
State 是 store 中的狀態(tài)值，這個(gè)值只能通過(guò) getState() 獲取到
getState 專門用于獲取 state 的方法
Dispatch 用來(lái)派發(fā)修改 state 的方法
Subscribe 用來(lái)訂閱了狀態(tài)的的方法
接下來(lái)我們使用圖形的形式來(lái)解析這個(gè)過(guò)程。
簡(jiǎn)單梳理下 redux 工作流程。
view 層通過(guò) dispatch 提交一個(gè) action ，然后在 reducers 中找到與 action 匹配成功的 reducer，通過(guò) reducer 去修改 store 中的狀態(tài)，然后把修改后的結(jié)果通過(guò) subscribe 去修改 view 層。
這簡(jiǎn)單的幾句話概述了 redux 的幾個(gè)特點(diǎn)：
Redux 是單向數(shù)據(jù)流
Redux 扮演一個(gè)中間件的角色
有了這些認(rèn)識(shí)，咱們來(lái)看看那再熟悉不過(guò)的計(jì)數(shù)器 demo。
import React,{ useState,useEffect } from "react"import {createStore } from "redux"------- 第一步let reducers = (state=0,action)=>{ switch (action.type) { case "increment": return state + 1; case "decrement": return state - 1; default: return state; }}------第二步let store = createStore(reducers)------第三步let add = () => { store.dispatch({ type:"increment" })}let minus = () => { store.dispatch({ type:"decrement" })}function App(props){-----第四步 const [count,setCount] = useState({num:0}) useEffect(()=>{ store.subscribe(()=>{ setCount({num:store.getState()}) }) }) return ( <div> hello world <h3>{count.num}h3> <button onClick={()=>{add()}}>增加button><br/><br/> <button onClick={()=>{minus()}}>減去button> div> ) }export default App
看了上面的計(jì)數(shù)器 demo。有幾點(diǎn)勾勾要強(qiáng)調(diào)一下，畢竟用了別人的東西，里面的規(guī)矩還是得需要了解的。
Reducer 的定義必須攜帶兩個(gè)必要參數(shù)，分別是 state 和修改 state 的 action
Action 的派發(fā)必須要 dispatch 派發(fā)
對(duì)于視圖層要通過(guò) subscribe 訂閱狀態(tài)，一旦狀態(tài)發(fā)生改變就會(huì)更改視圖層
以上，學(xué)廢了嗎？
推薦閱讀：
技術(shù)人年度總結(jié) | 2020，注定不平凡
2020 最后一篇技術(shù)文：可愛(ài)的烏咪 UmiJS
前端人因?yàn)?Vue3 的 Ref-sugar 提案打起來(lái)了！
點(diǎn)點(diǎn)“贊”和“在看”，保護(hù)頭發(fā)，減少bug。