18 redux

12/15/2021 react

Redux 入门教程(一):基本用法 - 阮一峰的网络日志 (opens new window)

Redux 入门教程(二):中间件与异步操作 - 阮一峰的网络日志 (opens new window)

Redux 入门教程(三):React-Redux 的用法 - 阮一峰的网络日志 (opens new window)

redux 最佳实践方案:
介绍 | DvaJS (opens new window)
dva/README_zh-CN.md at master · dvajs/dva (opens new window)

# redux理解

英文文档: https://redux.js.org/
中文文档: http://www.redux.org.cn/
Github: https://github.com/reactjs/redux

  • redux 是什么
  1. redux 是一个专门用于做状态管理的 JS 库(不是 react 插件库)。
  2. 它可以用在 react, angular, vue 等项目中, 但基本与 react 配合使用。
  3. 作用: 集中式管理 react 应用中多个组件共享的状态。
  • 什么情况下需要使用redux
  1. 某个组件的状态,需要让其他组件可以随时拿到(共享)。
  2. 一个组件需要改变另一个组件的状态(通信)。
  3. 总体原则:能不用就不用, 如果不用比较吃力才考虑使用。
  • redux 工作流程

# redux 的三个核心概念

  • action
  1. 动作的对象
  2. 包含2个属性
    type:标识属性, 值为字符串, 唯一, 必要属性
    data:数据属性, 值类型任意, 可选属性
  3. 例子:{ type: 'ADD_STUDENT',data:{name: 'tom',age:18} }
  • reducer
  1. 用于初始化状态、加工状态。
  2. 加工时,根据旧的 state 和 action, 产生新的 state 的 纯函数
  • store
  1. 将state、action、reducer联系在一起的对象
  2. 如何得到此对象?
import {createStore} from 'redux'
import reducer from './reducers'
const store = createStore(reducer)
  1. 此对象的功能?
    getState(): 得到state
    dispatch(action): 分发action, 触发reducer调用, 产生新的state
    subscribe(listener): 注册监听, 当产生了新的state时, 自动调用
更新时间: Monday, December 20, 2021 21:37