老生常谈的 Redux

转载

mb6008e936aad4e 2021-01-22 19:28:17

文章标签 Redux 文章分类 前端开发

Redux 官方对它的定义是 JavaScript 应用程序的可预测状态容器。也就是说，我们在给一个值的时候，对于这个值的结果是可预测的。

Redux 提供了一个特有的 api 叫 createStore()。从字面意思就能感受到，这是一个创建 store 的方法。

对于 store ，它有四个重点知识：

State 是 store 中的状态值，这个值只能通过 getState() 获取到
getState 专门用于获取 state 的方法
Dispatch 用来派发修改 state 的方法
Subscribe 用来订阅了状态的的方法

接下来我们使用图形的形式来解析这个过程。

老生常谈的 Redux_Redux

简单梳理下 redux 工作流程。

view 层通过 dispatch 提交一个 action ，然后在 reducers 中找到与 action 匹配成功的 reducer，通过 reducer 去修改 store 中的状态，然后把修改后的结果通过 subscribe 去修改 view 层。

这简单的几句话概述了 redux 的几个特点：

Redux 是单向数据流
Redux 扮演一个中间件的角色

有了这些认识，咱们来看看那再熟悉不过的计数器 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复制代码

看了上面的计数器 demo。有几点勾勾要强调一下，毕竟用了别人的东西，里面的规矩还是得需要了解的。