从零理解redux | 奇趣生活实验室

从零理解redux | 奇趣生活实验室

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

纯函数
compose函数

三大原则

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

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啦，进入官方仓库，我们可以看到一个最简单的使用示例

jsCopy

链接

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}