ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

redux 学习笔记

2022-05-15 21:33:37  阅读:203  来源: 互联网

标签:reducer 笔记 学习 组件 state action redux store


 

学习资料: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

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有