react系列(四)Redux基本概念和使用
Redux基本概念和使用
先从Flux开始
先放一个Flux官网的链接。需要fq。
Flux是Facebook提出的一种构建客户端网页应用的应用架构,它是一种抽象程度很高的设计模式,鼓励单向数据流。
在之前的MVC架构中,在小型应用中,Model和View较少时,关系不复杂,维护轻松。但是一旦功能越来越复杂,将难以维护,多个Model和多个View之间存在着多对多的关系,在开发时,需要花费很多时间去处理Modal间的关系。
Flux架构的关键在于单向数据流,他由三部分构成——
- dispatcher
- stores
- views(React components)
从一次Action触发,Dispatcher将它dispatch到store,更新store,store的变化同步更新到对应的view层。等待下一次的Action触发。
这个过程中,数据始终是单向流动的。
社区基于Flux有多种实现,其中Dan大神的Redux最受推崇,已经成为事实标准。
Redux
前面的文章提到了组件间通信的几种方式,context API在小规模共享应用时值得一试。今天主要讲解react全家桶中的Redux。
概念
在说概念之前,先看一张图:
| 图片来源 https://css-tricks.com/learning-react-redux/
根据上面的图片,可以发现Redux相当于一个全局的Provider。各个子组件是Consumer。
当然,Redux不只是简单的提供一个全局Provider。
它有以下几个特点:
1.唯一数据源
不同于Flux的实现,Redux只有一个唯一的数据源,它提供一个深层嵌套的对象来存放所有数据。
2.状态只读
在Redux中,所有的状态都是只读的,如果要修改state,则需要dispatch一个action,reducer通过action的type,选择执行不同的操作,返回新的状态。
3.通过纯函数改变状态
纯函数的概念很简单,一个函数,给定输入,则确定输出,不受其他因素影响,也不会影响原来的引用。
由于Redux提倡纯函数对状态进行处理,不会更改之前的对象,对于操作
fn(x) = y;
只要x给定,则y一定是确认值。这样不论是之后进行很方便来追踪数据的更改,debug,时间回溯,都非常方便。
使用
Redux的API非常简单,这里是Redux API文档。
我们只需要使用两个API就能使用到Redux。
// 创建一个Reducer
let countReducer = (state = 0, action) => {
if (action.type === 'ADD') {
state++;
}
return state;
}
// 创建一个Store
var store = Redux.createStore(countReducer);
// dispatch一个action
store.dispatch({
type: 'ADD'
});
如果有多个State,比如,count和user,则需要使用combineReducers方法。
import { createStore, combineReducers } from 'redux';
// The User Reducer
const userReducer = (state = {}, action) => {
return state;
}
// The Widget Reducer
const countReducer = (state = {}, action) => {
return state;
}
// Combine Reducers
const reducers = combineReducers({
userState: userReducer,
countState: countState,
});
const store = createStore(reducers);
在实际使用时,有ActionCreateor的概念,其实并不复杂,就是一个函数,返回响应的Action。可以在这个函数中对Action做一些逻辑的判断处理。
CountActionCreators.js
export function plus() {
return {
type: 'PLUS'
};
}
export function minus() {
return {
type: 'MINUS'
};
}
接下来需要调用bindActionCreators。
let one = bindActionCreators({ plusOne, minusOne }, store.dispatch);
store.subscribe(() => console.log(store.getState()));
one.plusOne();
one.minusOne();
这里是一个完整的例子-codesandbox。
下一篇讲解在React中使用Redux。
感谢阅读。
react系列(四)Redux基本概念和使用的更多相关文章
- react系列(五)在React中使用Redux
上一篇展示了Redux的基本使用,可以看到Redux非常简单易用,不限于React,也可以在Angular.Vue等框架中使用,只要需要Redux的设计思想的地方,就可以使用它. 这篇主要讲解在Rea ...
- react系列(一)JSX语法、组件概念、生命周期介绍
JSX React中,推出了一种新的语法取名为JSX,它给了JS中写HTML标签的能力,不需要加引号.JSX的语法看起来是一种模板,然而它在编译以后,会转成JS语法,只是书写过程中的语法糖. JSX的 ...
- react系列教程
这个系列将从基础语法讲起,把react全家桶都讲到,然后到具体的使用,最后完成后,会写一个完整的demo. 前置要求: 基本的CSS,JS要熟练. 部分ES6语法需要了解.可以参考下面提到的阮一峰老师 ...
- 在React中使用Redux
这是Webpack+React系列配置过程记录的第六篇.其他内容请参考: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-rout ...
- react系列从零开始-react介绍
react算是目前最火的js MVC框架了,写一个react系列的博客,顺便回忆一下react的基础知识,新入门前端的小白,可以持续关注,我会从零开始教大家用react开发一个完整的项目,也会涉及到w ...
- Redux 核心概念
http://gaearon.github.io/redux/index.html ,文档在 http://rackt.github.io/redux/index.html .本文不是官方文档的翻译. ...
- React 系列教程 1:实现 Animate.css 官网效果
前言 这是 React 系列教程的第一篇,我们将用 React 实现 Animate.css 官网的效果.对于 Animate.css 官网效果是一个非常简单的例子,原代码使用 jQuery 编写,就 ...
- 《ASP.NET Core In Action》读书笔记系列四 创建ASP.NET Core 应用步骤及相应CLI命令
一般情况下,我们都是从一个模板(template)开始创建应用的(模板:提供构建应用程序所需的基本代码).本节使用 Visual Studio 2017 .ASP.NET Core2.0和 Visua ...
- Redux 基础概念
Redux is a predictable state container for JavaScript apps.,亦即 Redux 希望能提供一个可以预测的 state 管理容器,让开发者可以可 ...
随机推荐
- PHP三维优先级运算
昨天去某大型公司面试,做了一套面试题,整套面试题的基础要求比较高,对于js的使用有一定的要求.在本次面试中碰到PHP三维运算优先级的问题,先看题: <?php $b=20; $c=40; $a= ...
- IOS如何下载旧版本应用APP
前言 文章相对来说比较复杂,特别是查找版本ID对应的步骤,这里推荐使用另一种方案,操作起来更简单. 本文介绍如何使用Workflow及Fiddler下载IOS旧版本APP应用. 实现原理 通过Work ...
- 【阿里云产品公测】OpenSearch初体验
OpenSearch是一个非常有意义的功能,对于很多数据量较大的站点, SF2< 如果搜索功能自己做的话,或者用数据库里的查询语句,首先效率低下,而且占用资源. ); <Le6 另 ...
- Java——实现对密码进行MD5加密
package common; /** *@author作者 E-Mail: *@version 创建时间:2015-9-24+下午01:22:44 *类说明 **/ import java.secu ...
- How to solve problems
练习是为了帮助你成长 0.Don't panic! 1.What are the inputs? 2.What are the outputs? 3.Work through some example ...
- 【Python】Sublime text 3 搭建Python IDE
背景: 最经遇到一件很苦恼的事情,就是在Sublime text 3中写的Python代码直接挪到python原生的ide中老是报格式的错误(有时让人讨厌的缩进),没有办法,看到Sublime tex ...
- Android学习——BroadCast(二)
这篇博文介绍有序广播的使用 有序广播的发送 和普通广播完全相同,只需要更换发送的方式即可 ordered.setOnClickListener(new View.OnClickListener() { ...
- spring----面试题
1.什么是Spring beans? Spring beans 是那些形成Spring应用的主干的java对象.它们被Spring IOC容器初始化,装配,和管理.这些beans通过容器中配置的元数据 ...
- Oracle数据库从入门到精通 多表查询知识以及范例
视频课程:李兴华 Oracle从入门到精通视频课程 学习者:阳光罗诺 视频来源:51CTO学院 总体内容: 多表查询的意义以及基本问题. 表的连接查询 SQL:1999语法标准对多表查询的支持. 数据 ...
- Javascript 删除tr 元素
Javascript 删除tr 元素 function delete1(obj){ var tr=obj.parentNode.parentNode; var tbody=tr.parentNod ...