从零理解redux

    0

理解本文,你需要以下基础知识

  1. 纯函数
  2. compose函数

三大原则

  1. 单一数据源
  2. State 是只读的
  3. 使用纯函数来执行修改

Redux架构

  • state: 全局的状态对象,唯一且不可变。
  • store: 调用createStore 函数生成的对象,里面封入了定义在createStore内部用于操作全局状态的方法,用户通过这些方法使用Redux。
  • action: 描述状态如何修改的对象,固定拥有一个type属性,通过store的dispatch方法提交。
  • reducer: 实际执行状态修改的纯函数,由用户定义并传入,接收来自dispatch的action作为参数,计算返回全新的状态,完成state的更新,然后执行订阅的监听函数。
  • storeEnhancer: createStore的高阶函数封装,用于加强store的能力,redux提供的applyMiddleware是官方实现的一个storeEnhancer。
  • middleware: dispatch的高阶函数封装,由applyMiddleware把原dispatch替换为包含middleware链式调用的实现。

简单实现

理解redux的方法当然是取实现一个tiny-redux啦,进入官方仓库,我们可以看到一个最简单的使用示例

js
import { createStore } from 'redux' function counterReducer(state = { value: 0 }, action) { switch (action.type) { case 'counter/incremented': return { value: state.value + 1 } case 'counter/decremented': return { value: state.value - 1 } default: return state } } let store = createStore(counterReducer) store.subscribe(() => console.log(store.getState())) store.dispatch({ type: 'counter/incremented' }) // {value: 1} store.dispatch({ type: 'counter/incremented' }) // {value: 2} store.dispatch({ type: 'counter/decremented' }) // {value: 1}

链接

评论区

共有评论 0

暂无评论