其他分享
首页 > 其他分享> > redux 学习笔记

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时, 自动调用

标签:reducer,笔记,学习,组件,state,action,redux,store
来源: https://www.cnblogs.com/shining-feifan/p/16274634.html