当前位置:   article > 正文

从 Redux 源码谈谈函数式编程_redux 函数式

redux 函数式

摘要

在 React 的世界中,状态管理方案不下几百种,但其中最经典的,莫过于 Redux 。如果你想学习函数式编程,那么 Redux
源码就是最好的学习材料。考虑到不少小伙伴用的是 Vue ,本人争取让这篇文章写得通俗易懂,让没有接触过 React 技术栈的同学也能掌握
Redux 。

Redux 属于典型的“百行代码,千行文档”,其中核心代码非常少,但是思想不简单,可以总结为下面两点:

  • 全局状态唯一且不可变(Immutable) ,不可变的意思是当需要修改状态的时候,用一个新的来替换,而不是直接在原数据上做更改:
 let store = {
    foo: 1, bar: 2 };

 // 当需要更新某个状态的时候
 // 创建一个新的对象,然后把原来的替换掉
 store = {
    ...store, foo: 111 };
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

这点与 Vue 恰好相反,在 Vue 中必须直接在原对象上修改,才能被响应式机制监听到,从而触发 setter 通知依赖更新。

状态更新通过一个纯函数(Reducer)完成。纯函数(Pure function)的特点是:

  • 输出仅与输入有关;
  • 引用透明,不依赖外部变量;
  • 不产生副作用;

因此对于一个纯函数,相同的输入一定会产生相同的输出,非常稳定。使用纯函数进行全局状态的修改,使得全局状态可以被预测。

1. 需要了解的几个概念

在使用 Redux 及阅读源码之前需要了解下面几个概念:

Action

action 是一个普通 JavaScript 对象,用来描述如何修改状态,其中需要包含 type 属性。一个典型的 action 如下所示:

const addTodoAction = {
   
  type: 'todos/todoAdded',
  payload: 'Buy milk'
}
  • 1
  • 2
  • 3
  • 4
  • 5

Reducers

reducer 是一个纯函数,其函数签名如下:

/**
 * @param {State} state 当前状态
 * @param {Action} action 描述如何更新状态
 * @returns 更新后的状态
 */
function reducer(state: State, action: Action): State
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

reducer 函数的名字来源于数组的 reduce 方法,因为它们类似数组 reduce 方法传递的回调函数,也就是上一个返回的值会作为下一次调用的参数传入。

reducer函数的编写需要严格遵顼以下规则:

  • 检查reducer是否关心当前的action
  • 如果是,就创建一份状态的副本,使用新的值更新副本中的状态,然后返回这个副本
  • 否则就返回当前状态

一个典型的 reducer 函数如下:

const initialState = {
    value: 0 }

function counterReducer(state = initialState, action) {
   
  if (action.type === 'counter/incremented') {
   
    return {
   
      ...state,
      value: state.value + 1
    }
  }
  return state
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

Store

通过调用 createStore 创建的 Redux 应用实例,可以通过 getState() 方法获取到当前状态。

Dispatch

store 实例暴露的方法。更新状态的唯一方法就是通过 dispatch 提交 action 。store 将会调用 reducer 执行状态更新,然后可以通过 getState() 方法获取更新后的状态:

store.dispatch({
    type: 'counter/incremented' })

console.log(store.getState())
// {value: 1}
  • 1
  • 2
  • 3
  • 4
  • 5

storeEnhancer

createStore 的高阶函数封装,用于增强 store 的能力。Redux 的 applyMiddleware 是官方提供的一个 enhancer 。

middleware

dispatch 的高阶函数封装,由 applyMiddleware 把原 dispatch替换为包含 middleware 链式调用的实现。Redux-thunk 是官方提供的 middleware,用于支持异步 action 。

2. 基本使用

学习源码之前,我们先来看下 Redux 的基本使用,便于更好地理解源码。

首先我们编写一个 Reducer 函数如下:

// reducer.js
const initState = {
   
  userInfo: null,
  isLoading: false
};

export default function reducer(state = initState, action) {
   
  switch (action.type) {
   
    case 'FETCH_USER_SUCCEEDED':
      return {
   
        ...state,
        userInfo: action.payload,
        isLoading: false
      };
    case 'FETCH_USER_INFO':
      return {
    ...state, isLoading: true };
    default:
      return state;
  }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25

在上面代码中:

  • reducer首次调用的时候会传入initState作为初始状态,然后switch…case最后的default用来获取初始状态
  • 在switch…case中还定义了两个action.type用来指定如何更新状态

接下来我们创建 store :

// index.js
import {
    createStore } from "redux";
import reducer from "./reducer";

const store = createStore(reducer);
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

store 实例会暴露两个方法 getState 和 dispatch ,其中 getState 用于获取状态,dispatch 用于提交 action 修改状态,同时还有一个 subscribe 用于订阅store的变化:

// index.js

// 每次更新状态后订阅 store 变化
store.subscribe(() => console.log(store.getState()));

// 获取初始状态
store.getState();

// 提交 action 更新状态
store.dispatch({
    type: "FETCH_USER_INFO" });
store.dispatch({
    type: "FETCH_USER_SUCCEEDED", payload: "测试内容" });
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

我们运行一下上面的代码,控制台会先后打印:

{
    userInfo: null, isLoading: false } // 初始状态
{
    userInfo: null, isLoading: true } // 第一次更新
{
    userInfo: "测试内容", isLoading: false } // 第二次更新
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

3. Redux Core 源码分析

上面的例子虽然很简单,但是已经包含 Redux 的核心功能了。接下来我们来看下源码是如何实现的。

createStore

可以说 Redux 设计的所有核心思想都在 createStore 里面了。 createStore 的实现其实非常简单,整体就是一个闭包环境,里面缓存了 currentReducer 和 currentState ,并且定义了getState、subscribe、dispatch 等方法。

createStore 的核心源码如下,由于这边还没用到 storeEnhancer ,开头有些if…else的逻辑被省略了,顺便把源码中的类型注解也都去掉了,方便阅读:

// src/createStore.ts
function createStore(reducer, preloadState = undefined) {
   
  let currentReducer = reducer;
  let currentState = preloadState;
  let listeners = [];

  const getState = () => {
   
    return currentState;
  }

  const subscribe = (listener) => {
   
    listeners.push(listener);
  }

  const dispatch 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/IT小白/article/detail/477330?site
推荐阅读
相关标签
  

闽ICP备14008679号