react-store

今天学习了阮一峰大大的react-redux的store API ，有一些理解不知道对不对，记一下笔记

store.getState() 拿到当前时刻的state
store.dispatch() 可以设置，修改state的值
store.subscribe() 设置监听函数，一旦 State 发生变化，就自动执行这个函数。

工作流程

1.首先，用户发出 Action。

store.dispatch(action);
2.然后，Store 自动调用 Reducer，并且传入两个参数：当前 State 和收到的 Action。 Reducer 会返回新的 State 。

let nextState = todoApp(previousState, action);
State 一旦有变化，Store 就会调用监听函数。

// 设置监听函数
store.subscribe(listener);
3.listener可以通过store.getState()得到当前状态。如果使用的是 React，这时可以触发重新渲染 View。

function listerner() { let newState = store.getState(); component.setState(newState); }

react-store相关推荐

React技术栈探究-Redux
React技术栈耕耘 -- Redux Redux 是近年来提出的 Flux 思想的一种实践方案,在它之前也有 reflux . fluxxor 等高质量的作品,但短短几个月就在 GitHub 上获近 ...
2 中间件的使用、异步action的创建
react-redux是react插件将所有组件分成两大类:UI组件和容器组件安装npm install react-redux -S UI组件: 只负责UI的呈现,不带有任何业务逻辑不使用th ...
关于Redux到底是个什么鬼
原文链接:https://zhuanlan.zhihu.com/p/20641377 我们故事的主人公,小明. 小明大学刚毕业,摆脱了宿舍的集体生活,自己在外面租了个一室一厅的小公寓住. 这是客厅的平 ...
[译]Vue官方成员：Vite生态发展的怎么样了
前言之前 Vite2 刚出来的时候,恰好我要负责一个新项目,所以我打算用最新的 Vite + Vue3 + TS 来构建这个项目. 不幸的是,那时候 Vite 有坑,热更新做的也不如传统 webpa ...
【视频】React ReduxToolkit状态管理：创建store对象及redux调试工具的安装方法
React ReduxToolkit状态管理:创建store
React单页如何规划路由、设计Store、划分模块、按需加载
本项目地址:react-coat-helloworld react-coat 同时支持浏览器渲染(SPA)和服务器渲染(SSR),本 Demo 仅演示浏览器渲染,请先了解一下:react-coat 第 ...
react+mobx：如何组织store之最佳实践
上篇文章 create-react-app + webpack + antd + less + mobx 的demo入门配置简单介绍了一个笔者使用的最基本的react配置,简单引入了mobx. 现在 ...
使用 store 来优化 React 组件
在使用 React 编写组件的时候,我们常常会碰到两个不同的组件之间需要共享状态情况,而通常的做法就是提升状态到父组件.但是这样做会有一个问题,就是尽管只有两个组件需要这个状态,但是因为把状态提到了父 ...
react hook + stamen store + pug实现纯函数无痛版react开发体验
基于最新的react 16.7.0-alpha.2,结合react hook + stamen store + pug,实现纯函数无痛版react开发体验,畅快度直逼clojurescript + r ...
如何在 React Component 之外获取 Redux Store
原文链接: Access the Redux Store Outside a React Component 译者注: 获取 redux 中的 store 的方法是个不起眼的小知识点,最近也有个小需求 ...

react-store

工作流程

react-store相关推荐

最新文章

热门文章