redux 学习笔记

 

学习资料：https://www.bilibili.com/video/BV1wy4y1D7JT?p=98

 

学习文档

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

redux是什么

1. redux是一个专门用于做状态管理的JS库(不是react插件库)。
2. 它可以用在react, angular, vue等项目中, 但基本与react配合使用。
3. 作用: 集中式管理react应用中多个组件共享的状态。

什么情况下需要使用redux

1. 某个组件的状态，需要让其他组件可以随时拿到（共享）。
2. 一个组件需要改变另一个组件的状态（通信）。

redux工作流程

 

Components 告诉 Action Creators 要执行的动作， Action Creators 可以有多个，

它会创建一个动作对象 action，包含要执行的动作类型和动作数据，交由 dispatch 进行分发，

dispatch会交给store，

store 相当于一个管理者，管理各个部分，store 将 action 和 previousState 传递给 Reducers ，

Reducers 加工状态执行要操作的动作对象，返回一个新的 state ，交还给 store，

组件可以通过 getState() 方法得到 redux 管理的状态.

redux的三个核心概念

action

1、动作的对象

2、包含2个属性

type：标识属性, 值为字符串, 唯一, 必要属性

data：数据属性, 值类型任意, 可选属性

3、例子：{ type: 'ADD_STUDENT',data:{name: 'tom',age:18} }

reducer

1. 用于初始化状态、加工状态。

2. 加工时，根据旧的state和action， 产生新的state的纯函数。

 

7.2.3. store

1、将state、action、reducer联系在一起的对象

2、如何得到此对象?

1)     import {createStore} from 'redux'

2)     import reducer from './reducers'

3)     const store = createStore(reducer)

3、此对象的功能?

1)     getState(): 得到state

2)     dispatch(action): 分发action, 触发reducer调用, 产生新的state

3)     subscribe(listener): 注册监听, 当产生了新的state时, 自动调用