走进react,走进redux，带你非常形象的认识store和它的孩儿们action，reducer，dispatch，state。

最新推荐文章于 2024-08-15 14:22:43 发布
最新推荐文章于 2024-08-15 14:22:43 发布
阅读量154 收藏
点赞数
文章标签： react.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43182945/article/details/120553006
版权
本文通过店长开店和关门的动作，形象地比喻了Redux中store、action、dispatch和reducer的工作流程。店长的动作（action）被dispatch分析，触发reducer响应，改变state，从而控制store的状态，展示了一个完整的Redux数据流过程。
摘要由CSDN通过智能技术生成

带你非常形象的认识store和它的孩儿们action，reducer，dispatch，state。

角色扮演分角
上半场
时间：早8点
你： 店长
地址： store 商店
action 你的动作：推 | 拉
dispatch（） 动作机器分析仪
reducer 商店门
state 门的状态
事件： 早上你要开店营业了。

action -------->dispatch(action)---------------->reducer------------->state----------->store
你 ‘推’ 向门----接收action,分析出动作 ‘推’ ---->接收并响应’推’----->门往里开------>商店门开，开始营业

下半场
时间：晚6点
你： 店长
地址： store 商店
action 你的动作：推 | 拉
dispatch（）动作机器分析仪
reducer 商店门
state 门的状态
事件： 晚上你要关店休息了。

action --------->dispatch(action)--------------->reducer------------->state----------->store
你 ‘拉’ 向门----接收action,分析出动作 ‘拉’ ---->接收并响应’拉’----->门往外关------>商店门关，关店休息

小飞侠十一
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端学习总结（十九）Redux——管理state数据最优雅的解决方案
浩时代的博客
08-16 1万+
一 Redux简介Redux 是 JavaScript 状态容器，提供可预测化的状态管理动机与目的JavaScript 单页应用开发日趋复杂，JavaScript 需要管理比任何时候都要多的 state （状态）。 state 可能包括服务器响应、缓存数据、本地生成尚未持久化到服务器的数据，也包括 UI 状态，如激活的路由，被选中的标签，是否显示加载动效或者分页器等等 管理不断变化的 sta
Redux官网学习知识点（day1）（State\Action\Reducer\Store\Dispatch\Selector)
Pandora_417的博客
10-11 241
ReactDOM.render( // 严格模式检查只在开发模式下运行，不会与生产模式冲突 <React.StrictMode> <Provider store={store}> <App /> </Provider> </React.StrictMode>, document.getElementById('root') ); 1、<React.StrictMode> 严格模式 Stri
如何选择Redux的store和React的state？
weixin_30907935的博客
12-26 275
话说react 代码贡献量最大的是位妹子。 对此没有“正确的”答案。有些用户更喜欢在Redux中保存每一个数据片段，以便始终保持应用程序的完全可序列化和受控版本。其他人则倾向于在组件的内部状态中保持非关键或UI状态，如“当前打开的下拉列表，按钮是否高亮”。 听听gaearon怎么说 在react中， 那些和全局状态无关的，短暂的状态，不会涉及的复杂的方式进行数据传递的，例如，在某个UI元...
React和Redux 之间的依赖注入connect（mapStateToProps、mapDispatchToProps）
逸尘的专栏
11-23 1万+
在理解react-redux通过connect连接的关系之前，需要重温下组件的概念，组件分为两大类：展示组件和容器组件。展示组件就是用来显示UI的普通组件，不涉及业务逻辑和redux。容器组件的概念不容易理解，但它与展示组件之间却存在着明显不同特征。 1. 容器组件 容器组件是使用 store.subscribe() 从 Redux state 树中读取部分数据，并通过 props 来把这些数...
react数据之dispatch,reducer
蜗牛的博客
04-03 4499
1.之前写了一篇fetch的简单用法，实际项目中数据比那个要复杂，下面看一下通过dispatch和reducer来控制数据的更新； 2.还是以上一个添加分组的组件为例： 首先我们写一个MoveGroupReducer.js文件，里面我们模拟一个数据，并且写一个方法点击选中的方法； ...
immer-reducer：带有Typescript的类型安全和简洁的reducer，用于React Hook和Redux
02-05
使用为React Hooks和Redux使用Typescript进行类型安全和简洁的缩减器！ :package: 安装 npm install immer-reducer 您还可以安装来帮助您避免编写减速器时出现错误。 :flexed_biceps: 动机 转这个 :pile_of_poo: :...
react-redux-getters:在 React 组件和 Redux 存储之间提供额外的“getter”层
08-04
在 React 组件和 Redux 存储之间提供额外的“getter”层。 getter 返回存储中的数据（如果存在），否则返回存根并调用 fetch 操作。 所以商店是自动填充的。 安装 yarn add react-redux-getters 用法 创建吸气剂 ...
浅谈React和Redux的连接react-redux
08-28
`react-redux` 是一个连接库，它为 React 组件提供了与 Redux store 的便捷接口，使得在 React 应用中使用 Redux 变得简单。 Redux 是一个可预测的状态容器，适用于 JavaScript 应用程序，尤其是单页面应用（SPA）...
react-reducer-observable：适用于小型react应用的redux-observable端口
02-27
安装npm install --save react-reducer-observable用法像redux-observable一样，该库围绕史诗的思想。 您可以阅读更多有关史诗的构建方式及其核心概念的。 要创建您的上下文，请传入您的化简器，史诗和依赖项。 ...
react-redux-spinner：用于react和redux的自动微调器
02-05
React Redux微调器 一个简单的微调器，用于执行任何“长时间”运行的任务（例如从服务器中获取数据）。 演示： : 安装 npm install react-redux-spinner --save 用法 导入库。 import { Spinner , // The React ...
dispatch作用 react_React系列十五 Redux(一)初见
weixin_34213766的博客
12-30 2579
在React的开发过程中，Redux对于我们是非常重要的。但是对于很多人来说，初次接触redux会感觉redux的学习坡度非常陡峭，难度比较大。在接下来，我会通过一个系列的方式循循渐进、层层深入的方式来讲解Redux：从redux的独立使用过程、到redux的结构划分、到redux结合react的过程、到redux中异步操作、到复杂数据的结构处理、到结合immutable的使用。整个过程...
React - 简单理解Redux的action reducer store
wust_cyl的博客
11-22 1238
什么是store，如图 这就是一个store,我们可以看到由dispatcher  reducer state构成，不难发现store其实是一个虚拟概念。 dispatcher是一个函数，用于广播action,将action传给所有的reducer，reducer然后处理它，对state进行更新 reducer是一个函数，用于通过action对state进行更新 state是一个对象，...
mapStateToProps，mapDispatchToProps的使用详解
热门推荐
suwu150
03-01 4万+
前言 刚接触redux的时候，发现大家对mapDispatchToProps使用有几种方法，而且都跑通了，本文来介绍下，redux的mapStateToProps，mapDispatchToProps的一些使用方式。 mapStateToProps（state, ownProps） mapStateToProps是一个函数，用于建立组件跟 store 的 state 的映射关系 作为一个函...
redux 的dispatch和action
qq_41792374的博客
10-28 4151
下面是一些 action 的示例： { type: 'ADD_TODO', text: 'Go to swimming pool' } { type: 'TOGGLE_TODO', index: 1 } { type: 'SET_VISIBILITY_FILTER', filter: 'SHOW_ALL' } 一般来说你会通过 store.dispatch() 将 action 传到 store。 唯一改变 state 的方法就是触发 action，action 是一个用于描述已发生事件的普通对象。 st
Redux源码分析--createStore（dispatch、getState）
wangyuegyq的博客
03-13 1068
Redux源码很简单，就是通过createStore.js暴露的createStore 方法创建当前项目唯一的一个store对象，store对象是唯一的、单一的，一个项目里面只能创建一个store对象。当你拆分数据处理逻辑时，可以使用reducer组合，而不是创建多了store对象。 createStore用法： createStore(reducer, preloadState, ...
react中dispatch_简化React中的Action的写法，不要中间件，不写dispatch
weixin_35758901的博客
12-24 603
我们在写React应用时，通常用到redux做状态管理，然后会用到一些中间件来支持异步action，比如redux-thunk.通常我们的代码类似下面这样的：//ActionType R.jsexport ActionType{TYPE1:'type1',TYPE2:'type2',TYPE3:'type3',// others}//reducer reducer.jsimport {Actio...
认识redux的store，reducer，action
沈斯明技术博客
12-06 2533
store是一个对象，它有四个主要的方法： 1、dispatch: 用于action的分发——在createStore中可以用middleware中间件对dispatch进行改造，比如当action传入dispatch会立即触发reducer，有些时候我们不希望它立即触发，而是等待异步操作完成之后再触发，这时候用redux-thunk对dispatch进行改造，以前只能传入一个对象，改
React前端面试每日一试 8.什么是React Portals？
最新发布
weixin_42900858的博客
08-15 236
React Portals 是一种强大的工具，尤其在处理UI组件时，使你能够灵活地管理DOM节点的渲染位置，而不受限于React组件树的嵌套关系。通过合理使用Portals，你可以更轻松地构建复杂的UI组件，提高应用的用户体验.PS:但事件冒泡仍然会遵循React的组件树结构.
Redux中文文档精要：Action、Reducer、Middleware与React集成
涵盖多个主题，如Reducer设计、State组织、Store创建、Action处理、代码结构优化、性能优化、ReactRedux的使用以及其他常见问题的解答。 **6. API文档** - **createStore**: 创建Redux Store的函数，接收Reducer...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值