为什么要使用 React-Redux?
通常我们使用 react 开发项目的时候,会把 redux 和 react-redux 库引进来,你是否思考过为什么需要 react-redux 库呢?今天就一起来分析一下这个问题。
Redux 本身是一个独立的库,可以与任何 UI 框架一起使用,包括 React,Angular,Vue,Ember 和 vanilla JS。尽管 Redux 和 React 经常一起使用,但它们彼此独立。
如果将 Redux 与任何类型的 UI 框架一起使用,通常将使用“UI 绑定”库将 Redux 与 UI 框架绑定在一起,而不是通过 UI 代码直接与 store 进行交互。
比如这样:
// 简单了解一下 redux 实现
function createStore(reducer) {var state;var listeners = []function getState() {return state}function subscribe(listener) {listeners.push(listener)return function unsubscribe() {var index = listeners.indexOf(listener)listeners.splice(index, 1)}}function dispatch(action) {state = reducer(state, action)listeners.forEach(listener => listener())}dispatch({})return { dispatch, subscribe, getState }
}
// 1) 创建 store
const store = createStore(counter)// 2) subscription store 订阅更新,然后重新渲染 UI 界面
store.subscribe(render);const valueEl = document.getElementById('value');// 3. subscription callback runs 订阅回调执行:
function render() {// 3.1) 获取当前 store stateconst state = store.getState();// 3.2) 提取所需数据const newValue = state.toString();// 3.3) 通过新的 state 去更新 UI 界面valueEl.innerHTML = newValue;
}// 4) 根据 store state 初始化 UI 界面
render();// 5) Dispatch actions 派发
document.getElementById("increment").addEventListener('click', () => {store.dispatch({type : "INCREMENT"});})
对任何 UI 层使用 Redux 都需要相同的一致步骤:
1、创建 Redux store
2、订阅更新
3、在订阅回调中:
1、获取当前 store 状态
2、提取此 UI 所需的数据
3、用数据更新 UI
4、如有必要,使用初始状态呈现 UI
5、通过 dispatch Redux actions 响应 UI 输入
尽管可以手动编写此逻辑,但这样做会变得非常重复。另外,优化 UI 性能将需要复杂的逻辑。
订阅存储,检查更新的数据以及触发重新渲染的过程可以变得更加通用和可复用。UI 绑定库(例如 React Redux)处理 store 交互逻辑,因此您不必自己编写该代码。
为什么要使用 React-Redux?相关推荐
- React+Redux开发实录(一)搭建工程脚手架
React+Redux开发实录(一)搭建工程脚手架 React+Redux开发实录(二)React技术栈一览 搭建工程脚手架 准备工作 安装node 安装git 安装一款前端IDE 推荐VSCode, ...
- 基于 react, redux 最佳实践构建的 2048
前段时间 React license 的问题闹的沸沸扬扬,搞得 React 社区人心惶惶,好在最终 React 团队听取了社区意见把 license 换成了 MIT.不管 React license ...
- React Redux 的一些基本知识点
一.React.createClass 跟 React.Component 的区别在于后者使用了ES6的语法,用constructor构造器来构造默认的属性和状态. 1. React.createCl ...
- 【视频】React redux toolkit创建状态切片
React redux toolkit创建状态切片
- react实战项目_React实战之React+Redux实现一个天气预报小项目
引言 经过一段时间的React学习,React和Vue的开发确实有很大的不同,但是都是MVVM框架,因此上手没有很大的难度,这次用React+Redux开发一个天气预报小项目.源码地址:https:/ ...
- React+Redux仿Web追书神器
引言 由于 10 月份做的 React Native 项目没有使用到 Redux 等库,写了一段时间想深入学习 React,有个想法想做个 demo 练手下,那时候其实还没想好要做哪一个类型的,也看了 ...
- react+redux+generation-modation脚手架搭建一个todolist
TodoList 1. 编写actions.js 2. 分析state 试着拆分成多个reducer 3. 了解store 4. 了解redux数据流生命周期 5. 分析容器组件和展示组件 搞清楚,数 ...
- webpack+react+redux+es6开发模式---续
一.前言 之前介绍了webpack+react+redux+es6开发模式 ,这个项目对于一个独立的功能节点来说是没有问题的.假如伴随着源源不断的需求,前段项目会涌现出更多的功能节点,需要独立部署运行 ...
- webpack+react+redux+es6开发模式
一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入 ...
- 一个 react+redux 工程实例
在前几天的一篇文章中总结部分提到了学习过程中基础的重要性.当然,并不是不支持大家学习新的框架,这篇文章就分享一下react+redux工程实例. 一直在学习研究react.js,前前后后做了几次分享. ...
最新文章
- python发邮件实例_python 发邮件实例
- Map集合遍历的四种方式理解和简单使用
- Centos7下关闭带验证的MongoDB
- 位居新品第一、单品第二,乐视1s吊打了谁的耳光?
- STM32启动文件——startup_stm32f10x_hd.s
- MacOS Server安装与应用
- tensorflow 学习资料汇总
- Directory monitor
- 第一次用Axure~
- IDENT_CURRENT ,@@identity,SCOPE_IDENTITY() 之间对比
- 手机应用的照相录像功能,为什么转到后台就不能工作了?
- ESP实验02-读取DS1307eerom34c32
- 如何做二维码批量又快速
- Simulink代码生成:通过Legacy Code Tool集成C函数
- 织梦模板被植入index.html,织梦dedecms百度快照劫持注入代码防范
- 短信网关平台选型推荐
- kkFileView安装及使用——文件预览解决方案
- 论文阅读:An Empirical Study of Spatial Attention Mechanisms in Deep Networks
- mPaaS 服务端核心组件:消息推送 MPS 架构及流程设计
- 高通量测序在物种鉴定中的应用