【前端】react and redux教程学习实践,浅显易懂的实践学习方法。
前言
前几天,我在博文【前端】一步一步使用webpack+react+scss脚手架重构项目 中搭建了一个react开发环境。然而在实际的开发过程中,或者是在对源码的理解中,感受到react中用的最多的,就是redux了,于是打开文档学习了一番。在这里做一些记录。
redux概念
redux是什么?它是用来管理状态的。在react开发中,我们经常会遇到一种情况,组件与父组件之间的通信,组件与组件之间的通信,
其中组件与父组件的通信通过props来完成。
/***********parent****************/
<Number
value={this.state.number}
/> /***********number****************/
<div >{this.props.value}</div>
number内部使用props获取父组件自己的state,通过setState更改父组件的state.number可以实现number组件的实时更新。
那么组件与组件之间的通信呢?例如我们有a,b两个组件,现在a要给b转发一个激活状态active,一般思路是,在同一个父组件下,使用props传递回调函数的方式。
/*********组件 a**********/
class A{
.....
changeActive(){
this.props.changebActive();
}
render(){
return <button onClick={this.changeActive}></button>
}
}
/*********组件 b**********/
class B{
render(){
return <div>状态:{this.props.active}</div>
}
}
/*********组件 parent**********/
class parent{
......
changebActive(){
this.setState({
active:"开启"
})
}
render(){
return <div>
<A
changebActive={this.changebActive.bind(this)}
/>
<B
active={this.state.active}
/>
</div>
}
}
通过A点击调用到parent的 changebActive方法,设置state更新b,这种方式非常容易使项目变得不可预测,并且state管理复杂,没错,redux很大程度就是用来解决这个问题的,它在react中的思想是:
将组件状态统一放到同一个超级父组件,再由这个超级父组件用更专业的方法分发props给所有的子组件,无论嵌套多少层。由超级父组件统一管理应用中所有的state。
---这就是redux。无论api名词如何晦涩难懂,它的核心思想是在开发中浮现的。
redux的API
一、所有的状态,保存在一个对象里面。
所有的状态都保存在一个对象里面,redux基本三大原则之一,单一数据源,一个应用所有的状态被保存在一个对象里,这个对象通过store管理,想象一下,整个页面的状态被存储在一个对象里面,其实类似一个配置文件,你可以从服务器读取,可以从任何地方改变。view则是同步的,这看起来更精炼不是么。
二、store
Store 就是保存状态数据对象的地方,你可以把它看成一个容器。整个应用只能有一个 Store。
Redux 提供createStore
这个函数,用来生成 Store。createStore传入了一个函数这个函数将接收到两个参数,一个state,一个action,action就是由子组件发出的更改请求,state就是那个单一的state对象。
import { createStore } from 'redux';
const store = createStore(fn);
三、action
发起状态改变的起点是action,由子组件发出action,子组件通过props调用回调函数,通知父组件发出action。
触发:
store.dispatch(action);
四、store.dispatch
这个方法就是发出action的方法,一般传入action,调用这个方法之后,会触发在createStore中传入的函数。
五、store.getState
它用来获取当前的state对象
六、reducer
这个就是createStore中传入的函数的名词解释,这个函数的执行必须返回一个新的state:
export default (state={number:0},action)=>{//每次调用都会传入state和当前通知的action
switch(action.type){
case "NUMBER_ADD": //发过来的action如果是NUMBER_ADD 就返回number++
state.number++;
break;
case "NUMBER_LESS":
state.number--;
break;
}
return Object.assign({},state); //必须返回一个新的state ,可以使用assign合并
}
注意这里用了es6,给state添加了一个默认值,{number:0}。
六、store.subscribe()
Store 允许使用store.subscribe
方法设置监听函数,一旦 State 发生变化,就自动执行这个函数。
import { createStore } from 'redux';
const store = createStore(reducer); store.subscribe(render);
比如上面我在生成store传入reducer函数之后,使用store.subscribe()设置监听函数为render,则每次state改变了,就会执行render函数,刷新视图。
概念名词太多,不如实践
实践一个number输入框的加减组件,你就能大概知道redux究竟是怎么工作的。
一、准备
首先你需要搭建一个react的开发环境,需要一个index.html 输出目录等。详见我的另一篇博文:【前端】一步一步使用webpack+react+scss脚手架重构项目 。
然后你需要一定的react开发实践,React有props和state两个属性: props意味着父组件分发下来的属性,state意味着组件内部可以自行管理的状态,并且整个React没有数据向上回溯的能力,也就是说数据只能单向向下分发,或者自行内部消化。
理解这个是理解React和Redux的前提。
你需要npm安装redux:
num install redux react-redux --save-dev
二、代码
1.number.js
import React,{Component} from "react"; const propTypes = {
add:React.PropTypes.func.isRequired,
less:React.PropTypes.func.isRequired,
value:React.PropTypes.object.isRequired
}
class Number extends Component{
add(){
this.props.add({type:"NUMBER_ADD"}) //调用app.js中传过来的箭头函数,传入了type为NUMBER_ADD的action
}
less(){
this.props.less({type:"NUMBER_LESS"})
}
render(){
return <div>
<input type="text" value={this.props.value.number}/>
<button onClick={this.add.bind(this)}>
+
</button>
<button onClick={this.less.bind(this)}>
-
</button>
</div>
}
}
Number.propTypes = propTypes;
export {Number};
注意那两个click回调,发出了action,以及那个this.props.value.number的引用,props传入了state,获取了state.number
2.app.js
import React from "react";
import ReactDOM from "react-dom"; import {createStore} from "redux"; //导入createStore import {Number} from "./number.js";
import reducers from "./reducers.js";
const store = createStore(reducers); //生成store const content = document.querySelector(".content");
const render = ()=> ReactDOM.render(
<div>
<Number
value={store.getState()}
add={(action)=>store.dispatch(action)} //传入一个函数,传入发送过来的action,由reducers处理之后返回state,
less={(action)=>store.dispatch(action)}
/>
</div>,
content
);
render();
store.subscribe(render); //在reducers处理之后,返回了state,然后触发了render,更新视图
3.reducers.js
export default (state={number:0},action)=>{//每次调用都会传入state和当前通知的action
switch(action.type){
case "NUMBER_ADD": //发过来的action如果是NUMBER_ADD 就返回number++
state.number++;
break;
case "NUMBER_LESS":
state.number--;
break;
}
return Object.assign({},state); //必须返回一个新的state ,可以使用assign合并
}
这就是createStore传入的函数,当发出action,store会自动调用它传入state,action 返回了一个新的state.
Redux 的基本用法就介绍到这里,下一篇介绍它的高级用法:中间件和异步操作。为什么是下一篇?因为我也还没学。
资源
--------------------------------
转载必须在页头注明出处,此前多文章被转载不署名,自重
【前端】react and redux教程学习实践,浅显易懂的实践学习方法。的更多相关文章
- 【前端,干货】react and redux教程学习实践(二)。
前言 这篇博文接 [前端]react and redux教程学习实践,浅显易懂的实践学习方法. ,上一篇简略的做了一个redux的初级demo,今天深入的学习了一些新的.有用的,可以在生产项目中使用的 ...
- React 与 Redux 在生产环境中的实践总结
React 与 Redux 在生产环境中的实践总结 前段时间使用 React 与 Redux 重构了我们360netlab 的 开放数据平台.现将其中一些技术实践经验总结如下: Universal 渲 ...
- MapServer Tutorial——MapServer7.2.1教程学习——第一节用例实践:Example 1.4 Labeling the Map
MapServer Tutorial——MapServer7.2.1教程学习——第一节用例实践:Example 1.4 Labeling the Map 一.前言 MapServer拥有非常灵活的标签 ...
- MapServer Tutorial——MapServer7.2.1教程学习——第一节用例实践:Example1.7 Adding a wms layer
MapServer Tutorial——MapServer7.2.1教程学习——第一节用例实践:Example1.7 Adding a wms layer 前言 Add OGC WMS Layers( ...
- MapServer Tutorial——MapServer7.2.1教程学习——第一节用例实践:Example1.6 Defining Projections and Extents
MapServer Tutorial——MapServer7.2.1教程学习——第一节用例实践:Example1.6 Defining Projections and Extents 一.前言 当在m ...
- MapServer Tutorial——MapServer7.2.1教程学习——第一节用例实践:Example1.5 Adding a raster layer
MapServer Tutorial——MapServer7.2.1教程学习——第一节用例实践:Example1.5 Adding a raster layer 一.前言 MapServer不仅支持 ...
- MapServer Tutorial——MapServer7.2.1教程学习——第一节用例实践:Example1.3 Displaying Classes in a Layer
MapServer Tutorial——MapServer7.2.1教程学习——第一节用例实践:Example1.3 Displaying Classes in a Layer 一.前言 关于第一节的 ...
- MapServer Tutorial——MapServer7.2.1教程学习——第一节用例实践:Example1.2 Static Map with Two Layers
MapServer Tutorial——MapServer7.2.1教程学习——第一节用例实践:Example1.2 Static Map with Two Layers 一.前言 上一篇博客< ...
- MapServer Tutorial——MapServer7.2.1教程学习——第一节用例实践:Example1.1 A map with single layer
MapServer Tutorial——MapServer7.2.1教程学习——第一节用例实践:Example1.1 A map with single layer 一.前言 开始MapServer用 ...
随机推荐
- Ionic在Android上部署app步骤
详情链接:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/ionic%E5%9C%A8android%E4%B8%8A%E9%83% ...
- Testlink研究小结
1.Redmine与Testlink的关联 (1)redmine中的项目对应testlink的测试项目 (2)testllink执行用例时发现的问题可以记录到redmine中 2.Testlink优点 ...
- 最全Oracle环境搭建之.NET程序员初遇Oracle
前言:如果你习惯了傻瓜式的一步步安装,那么Oracle和.NET搭配,绝对会让你头痛不已. 目前我不敢保证自己理解的Oracle理论部分100%正确,但环境安装过程一定可以收藏以备不时之需. 路这么长 ...
- laydate时间插件更换皮肤
<script> ;!function(){ laydate.skin('molv'); laydate({ elem: '#demo' }) }();</script>
- Linux之用户管理--初级上
管理用户命令汇总 命令 注释说明(特殊颜色的必须掌握) useradd增 同adduser命令,执行此命令可在系统中添加用户.(更改4个用户文件) userdel删 执行此命令可删除用户及相关用户的配 ...
- 原生js 实现 Ajax 跨浏览器使用
js 实现 Ajax 跨浏览器使用 var CommonUtils = {}; (function(CommonUtils){ //---- Ajax module ---- CommonUtils. ...
- java基础(8) -集合类-Collecion
集合类-Collecion Collection接口 常用方法 //添加新元素 boolean add (E element); //返回迭代器 Iterator<E> iterator( ...
- 初试spring-session
一.简介 spring-session提供了用户会话信息管理的API和实现. 它将取代容器中的HttpSession.在没有容器会话集群方案的情况下,使得支持会话集群微不足道. 它支持在一个浏览器实例 ...
- VB6之写注册表
难免会遇到写注册表的情况,写了个实用点的RegWrite函数.为了减少代码量,用WScript.Shell取代了API来实现. 使用方式就在注释中了,就不再过多解释了.PS:注释比实现代码要丰富多了, ...
- React--JSX语法
JSX语法,它是js语言的语法拓展. 比如2+2 , 对象.属性 , 函数的调用都可以在jsx中书写. import React from "react"; export defa ...