码迷,mamicode.com
首页 > 其他好文 > 详细

react-redux & 使用useSelector useDispatch 替代connect

时间:2020-06-23 17:21:10      阅读:291      评论:0      收藏:0      [点我收藏+]

标签:保存   col   stat   listen   理解   动作   data   euc   tst   

 1.redux简介

  • redux是react全家桶的一员,它试图为 React 应用提供「可预测化的状态管理」机制。

  • Redux是将整个应用状态存储到到一个地方,称为store

  • 里面保存一棵状态树(state tree)

  • 组件可以派发(dispatch)行为(action)给store,而不是直接通知其它组件

  • 其它组件可以通过订阅store中的状态(state)来刷新自己的视图

2.redux核心

2.1 State

state是数据集合

可以理解为工厂加工商品所需的原材料

2.2 action

State的变化,会导致View的变化。但是,用户接触不到 State,只能接触到View 所以,State的变化必须是 View导致的。

action就是改变state的指令,有多少操作state的动作就会有多少action。

可以将action理解为描述发生了什么的指示器

2.3 reducer 加工函数

action发出命令后将state放入reucer加工函数中,返回新的state可以理解为加工的机器

2.4 store

store 可以理解为有多个加工机器的总工厂

let store = createStore(reducers);

Store 就是把它们联系到一起的对象。Store 有以下职责:

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

我们可以通过store.getState()来了解工厂中商品的状态, 使用store.dispatch发送action指令

 
 
 
 
 
 
 

参考:https://juejin.im/post/5af00705f265da0ba60fb844

react-redux & 使用useSelector useDispatch 替代connect

标签:保存   col   stat   listen   理解   动作   data   euc   tst   

原文地址:https://www.cnblogs.com/GumpYan/p/13183048.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!