React之 redux 的简单介绍及使用
1、为什么使用redux?
在小型react项目的开发中 ,view(视图层)中的数据模型(即数据),可以存放在组件中的 state 对象,换句话说页面中的动态数据存放在 state 中。
但对于开发大型复杂的项目来说,单页面管理的状态(state)会有很多很多。管理不断变化的状态非常困难,状态的改变可能会引起页面的变化,
而页面的变化也会引起状态的变化,这种变化异常复杂,以至于我们很难捋清业务实现功能,为此我们用到了 redux,使用 redux 管理大量的状态(state)。
2、什么情况下不使用redux?
- UI层非常简单(页面动态数据少)
- 不需要与服务器大量交互,也没有使用WebSocket
- view(视图层)数据来源是单一的。
3、什么情况下要使用 redux?
- 某个组件的状态需要共享
- 某个状态需要在任何地方都可以拿到
- 一个组件需要改变全局状态
- 一个组件需要改变另一个组件的状态
4、redux 的实现原理是什么 ?
我们知道视图的数据来源于state,或者说是一一对应的。redux 只是把所有复杂的状态抽离出来保存在一个对象里面,
当视图层需要用到数据的时候,通过模块导入这个对象即可。
5、在使用 redux 之前我们需要了解 redux 模块中的几个基本概念。
①Store可以看作为 redux 的核心,因为它是存放数据的地方,只要视图层的数据改变了意味着这里的数据也发生了改变,
所有的数据操作都是围绕着 store 中的数据进行操作。生成一个 Store,通过 redux 提供的 createStore 函数生成
// index.js
// 仓库 store
import {createStore} from 'redux';
import reducer from './reducer';
// 将reducer与store绑定 ,// 将生成的 Store 暴露出去 reducer 是一个函数(操作数据的函数)
export default createStore(reducer);
②Stat 通过生成的 Store 对象的 getState()对象可以拿到此时的 数据,即保存在 Store 中的数据。
// 这是一个自定义的组件模块 ToDo.js,通过这个模块模拟获取 store 中的数据
import React, { Component } from 'react'
import {Button,Input,List} from 'antd';
// 引入 store
import store from '../store/index';
export default class ToDo extends Component {
constructor(props) {
super(props);
this.state = store.getState();// 拿到 store 中的数据
③ActionState的变化,会导致view的变化,但是用户是接触不到state的,只能接触到view。所以state的变化必须是view导致的。
Action是一个对象,用户触发一个事件(比如点击事件)会携带这个对象给 reducer 后面会讲到
//一个简单的 action 对象
let action = {
type:'TO_CNANGE_INPUT', // 代表Action的名称 是必须的
value:e.target.value
}
// 改变 state 的唯一方法 就是使用 Action
// 传给 reducer 之后 会根据 type 做相应的数据处理
④store.dispatch() 是view发出Action的唯一方法
inputChange = (e)=>{
let action = {
type:'TO_CNANGE_INPUT',
value:e.target.value
}
// 分发action 给 store
store.dispatch(action);
}
⑤Reducer Store接收到Action之后,将会返回一个新的 state。
reducer就是一个函数 它会处理传来的 Action 根据 Action 对象中的 type 处理相应的数据
// initState就是一个数据对象 保存在 store 中的数据
export default (state=initState,action)=>{
console.log('reducer');
if(action.type==='TO_CNANGE_INPUT'){
let obj = {
...state,
inputValue:action.value
};
console.log(obj);
return obj;
}
}
⑥store.subscribe()该方法用来监听Store 中的State是否发生变化
export default class ToDo extends Component {
constructor(props) {
super(props);
this.state = store.getState();// 拿到 store 中的数据
store.subscribe(this.changeState);//订阅者做的事情,监听store中数据的变化,更新当前state中的数据
}
6.redux 的工作流程
react组件触发事件-----》再到Action Creators 发送 action 对象 给 Reducer 处理------》Reducer更新数据完成,返回新数据给 View 中的state ----》view 在通过更新过后的state 重新渲染页面。
7.例子:React 配合 Redux 做一个备忘录,已发布到我的 GitHub上,有兴趣的话可以自行下载运行。
GitHub地址:https://github.com/ZhuJingLe/reduxAnli
如果嫌麻烦可留言找我要源代码^_^
React之 redux 的简单介绍及使用的更多相关文章
- 13. react 基础 redux 的基本介绍 及 用 antd 编写 TodoList 的样式
1. redux 简述 当 store 内的 数据进行变更的时候 多个组件感知到 store 内的数据变化 将会被自动更新 2. redux 工作流 Store 代表数据存储 (例如: 图书馆管理 ...
- 学习笔记-React的简单介绍&工作原理
一.React简单介绍 1.React起源于Facebook内部项目,与2013年5月 2.是一个用于构建用户界面的JavaScript库 二.React特点 1.声明式设计-React采用声明范式, ...
- React 简单介绍
React 简单介绍 作者 RK_CODER 关注 2014.12.10 17:37* 字数 2516 阅读 55715评论 6喜欢 70 why React? React是Facebook开发的一款 ...
- client高性能组件化框架React简单介绍、特点、环境搭建及经常使用语法
[本文源址:http://blog.csdn.net/q1056843325/article/details/54729657 转载请加入该地址] 明天就是除夕了 预祝大家新春快乐 [ ]~( ̄▽ ̄) ...
- 【Facebook的UI开发框架React入门之八】Image的使用简单介绍(iOS平台)-goodmao
--------------------------------------------------------------------------------------------------- ...
- 【Facebook的UI开发框架React入门之九】button简单介绍(iOS平台)-goodmao
--------------------------------------------------------------------------------------------------- ...
- 基于 React.js + Redux + Bootstrap 的 Ruby China 示例 (转)
一直学 REACT + METEOR 但路由部分有点问题,参考一下:基于 React.js + Redux + Bootstrap 的 Ruby China 示例 http://react-china ...
- immutable.js 在React、Redux中的实践以及常用API简介
immutable.js 在React.Redux中的实践以及常用API简介 学习下 这个immutable Data 是什么鬼,有什么优点,好处等等 mark : https://yq.aliyu ...
- React之redux学习日志(redux/react-redux/redux-saga)
redux官方中文文档:https://www.redux.org.cn/docs/introduction/CoreConcepts.html react-redux Dome:https://co ...
随机推荐
- 使用Docker运行SQL Server
现在.net core已经跨平台了,大家也都用上了linux用上了docker.跟.net经常配套使用的SQL SERVER以前一直是windows only,但是从SQL Server 2017开始 ...
- iframe插入视频自动播放代码
<iframe marginwidth=0 marginheight=0 src='http://www.wsview.com/yzplayerAction!play2.action?autoP ...
- linux初学者-文件的归档和传输
1.文件归档 因为linux系统都是以文件的形式存在,所以在处理文件时有时候因为文件太多导致传输速度慢等问题,为了提高方便并且提高效率,常把文件归档,文件归档就是把多个文件变成一个归档文件. 文件 ...
- 《JSP数据交互总结》
1.1.1为什么需要动态网页 静态网页的内容是固定的,不能提供个性化和定制化的服务,因此,动态网页技术逐渐发展起来. 1.1.2什么是动态页面 动态网页是指在服务器端运行的使用程序语言设计的交互式网页 ...
- web-fragment模块化使用
用eclipse右键new->other->web->web fragment project 确定后修改dynamic web project name为你要输出到的项目,当然可以 ...
- Split函数的使用
Split函数,用来返回一个下标从零开始的一维数组,如下举例说明 1.split(' '),''号中间是空格 def break_words(stuff): """ ...
- 角度转弧度&根据弧度计算圆周上点的坐标的方法
角度转弧度: #define AngleToRadian(angle) (M_PI/180.0f)*angle 以正东面为0度起点计算指定角度所对应的圆周上的点的坐标: float radian = ...
- 如何确定FPGA电路中DDR4的Speed bin 是否兼容?
原创 by DeeZeng DDR4 是否兼容,拿更快速度的DDR4,是否可以不改FPGA工程,直接换料就能直接用? 实际工作中,经常会碰到因为DDR3/4 或其他料件换料了,需要判断FPGA工程中I ...
- 使用 OpenSSL 为 Nginx 创建自签名证书 并开启客户端身份验证
本文章默认读者了解Openssl,CA,网站证书相关知识,直接实战!配置完成后,浏览器会显示"安全的HTTPS"连接.不会像其他文章那样,是红色警告的证书提示. 准备环境 笔者使用 ...
- Educational Codeforces Round 70 (Rated for Div. 2)
这次真的好难...... 我这个绿名蒟蒻真的要崩溃了555... 我第二题就不会写...... 暴力搜索MLE得飞起. 好像用到最短路?然而我并没有学过,看来这个知识点又要学. 后面的题目赛中都没看, ...