redux 状态管理一:redux 基础

一、redux 的工作流程

  • 状态统一放在 state 中,由 store 来管理 state;
  • store 由 reducer 创建,reducer 接受之前的状态,返回新的状态;
  • 外部改变 state 的唯一方法是通过调用 store 的 dispatch 方法,触发一个 action,这个 action 被对应的 reducer 处理,state 完成更新;
  • 可以通过 subscribe 在 store 上添加一个监听函数,store 中 dispatch 方法被调用时,会执行这个监听函数;
  • 可以添加中间件。

二、工作流程中 redux 提供的功能

  • 创建 store,即 createStore();
  • 合并 reducer,即 combineReducers();
  • 创建出来的 store 提供 subscribe,dispatch,getState 等方法;
  • 应用中间件,即 applyMiddleware()。

三、redux 中间件工作流程

redux 工作流程(同步):

  • dispatch 一个 action;
  • 这个 action 被 reducer 处理;
  • reducer 根据 action 更新 store(中的 state)。

使用中间件后工作流程:

  • dispatch 一个 action;
  • 这个 action 先被中间件处理(比如在这里发送一个异步请求);
  • 中间件处理结束后,再发送一个 action(有可能是原来的 action,也可能是不同的 action,视中间件功能而不同);
  • 中间件发出的 action 可能继续被另一个中间件处理,进行类似前面的步骤,即中间件可以链式串联;
  • 最后一个中间件处理完后,dispatch 一个符合 reducer 处理标准的 action;
  • 这个标准的 action 被 reducer 处理;
  • reducer 根据 action 更新 store(中的 state)。

四、基础

1、Store

职责:

  • 维持应用的 state;
  • 提供 getState() 方法获取 state;
  • 提供 dispatch(action) 方法更新 state;
  • 通过 subscribe(listener) 注册监听器;
  • 通过 subscribe(listener) 返回的函数注销监听器。

Redux 应用只有一个单一的 store。

createStore():创建一个 store。

  • 第一个参数 reducer(Function)。
  • 第二个参数是可选的,用于设置 state 的初始状态;
  • 第三个参数 enhancer(Function):Store enhancer 是一个组合 store creator 的高阶函数,返回一个新的强化过的 store creator。
  • 服务端 redux 应用的 state 结构可以与客户端保持一致,客户端可以将网络接收到的服务端 state 直接用于本地数据初始化。

applyMiddleware(…middlewares):组合 middleware 形成 middleware链。

  • 参数:…middlewares:遵循 Redux middleware API 的函数。每个 middleware 接受 Store 的 dispatch 和 getState 函数作为命名参数,并返回一个函数。
  • 该函数会被传入 被称为 next 的下一个 middleware 的 dispatch 方法,并返回一个接收 action 的新函数,这个函数可以直接调用 next(action),或者在其他需要的时刻调用,甚至根本不去调用它。
  • 调用链中最后一个 middleware 会接受真实的 store 的 dispatch 方法作为 next 参数,并借此结束调用链。所以,middleware 的函数签名是 ({ getState, dispatch }) => next => action。
2、reducer

reducer 的功能:reducer 接受一个旧的状态和一个 action,当这个 action 被触发的时候,reducer 处理后返回一个新状态。

reducer 是一个纯函数,什么是纯函数:

  • 不能修改传入参数;
  • 不能执行有副作用的操作,如:API请求和路由跳转等;
  • 不能调用非纯函数,如:Date.now() 或 Math.random()。

只要传入参数相同,返回计算得到的下一个 state 就一定相同。没有特殊情况、没有副作用、没有 API 请求、没有变量修改,单纯执行计算。
每个 reducer 只负责管理全局 state 中它负责的一部分,每个 reducer 的 state 参数都不同,分别对应它管理的那部分 state 数据。

combineReducers():把子 reducer 合并成一个总 reducer。

  • redux 只有一个单一的 store;若是将多个状态分成多个模块,一个 reducer 处理所有状态更新会显得杂乱无章。
  • combineReducers() 所做的只是生成一个函数,这个函数来调用你的一系列 reducer,每个 reducer 根据它们的 key 来筛选出 state 中的一部分数据并处理,然后这个生成的函数再将所有 reducer 的结果合并成一个大的对象。
  • combineReducers() 就是将模块化的 reducer 合并成一个总 reducer 来配合这个单一的 store。
3、Action

action 是把数据从应用传到 store 的有效载荷。它是 store 数据的唯一来源。一般通过 store.dispatch() 将 action 传到 store。

Action 本质上是 JavaScript 普通对象。action 内必须使用一个字符串类型的 type 字段来表示将要执行的动作。
多数情况下,type 会被定义成字符串常量。
当应用规模越来越大时,建议使用单独的模块或文件来存放 action;使用单独的模块或文件来定义 action type 常量并不是必须的,甚至根本不需要定义。

Action 创建函数:生成 action 的方法。

  • Redux 中只需把 action 创建函数的结果传给 dispatch() 方法即可发起一次 dispatch 过程。
  • 或者创建一个 被绑定的 action 创建函数 来自动 dispatch,然后直接调用它们。
  • store 里能直接通过 store.dispatch() 调用 dispatch() 方法。

bindActionCreators(actionCreators, dispatch):把一个 value 为不同 action creator 的对象,转成拥有同名 key 的对象。同时使用 dispatch 对每个 action creator 进行包装,以便可以直接调用它们。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值