39_redux_counter应用_redux版本
一、下载
要想使用redux,首先要下载它
npm install --save redux
二、核心API
1.createStore()
作用:创建包含指定reducer的store对象
编码:import {createStore} from 'redux'
import counter from './reducers/counter'
const store = createStore(counter)
2.store对象
作用:
redux库最核心的管理对象
它内部维护着:
state
reducer
核心方法:
getState()
dispatch(action)
subscribe(listener)
编码:
store.getState()
store.dispatch({type:'INCREMENT',number})
store.subscribe(render)
三、redux的三个核心概念
1.action
标识要执行行为的对象
包含两个属性:
type:标识属性,值为字符串,唯一,必要属性
xxx:数据属性,值类型任意,可选属性
例子:
const action = {
type:'INCREMENT',
data:2
}
Action Creator(创建Action的工厂函数)
const increment = (number) => ({type:'INCREMENT',number})
2.reducer
根据老的state和action,产生新的state的纯函数
样例:
export default function counter(state = 0, action){
switch(action.type){
case 'INCREMENT':
return state + action.data
case 'DECREMENT':
return state - action.data
default:
return state
}
}
注意:
返回一个新的状态
不要修改原来的状态
3.store
将state、action与reducer联系在一起发的对象
如何得到这个对象?
import {createStore} from 'redux'
import reducer from './reducers'
const store = createStore(reducer)
此对象的功能?
getState():得到state
dispatch(action):分发action,出发reducer调用,产生新的state
subscribe(listener):注册监听,当产生了新的state时,自动调用
四、代码:
项目结构:
import React from 'react'; import ReactDOM from 'react-dom'; import {createStore} from 'redux'; import App from './components/app'; import {counter} from './redux/reducers'; //生成store对象 const store = createStore(counter);//内部会第一次调用reduer函数得到初始state console.log(store, store.getState()); function render() { ReactDOM.render(<App store={store}/>, document.getElementById('root')); } //初始化渲染 render() //订阅监听(store中的状态变化了,就会自动调用重绘) store.subscribe(render)
index.js
import React, {Component} from 'react' import {INCREMENT, DECREMENT} from '../redux/action-types' export default class App extends Component { increment = () => { //1.得到选择的增加数量 const number = this.select.value * 1 //2.调用store的方法更新状态 this.props.store.dispatch({type: INCREMENT, data: number}) }; decrement = () => { //1.得到选择的增加数量 const number = this.select.value * 1 //2.调用store的方法更新状态 this.props.store.dispatch({type: DECREMENT, data: number}) }; incrementIfOdd = () => { //1.得到选择的增加数量 const number = this.select.value * 1 //2.得到原本的count状态 const count = this.props.store.getState() //3.判断,满足条件再更新状态 if (count % 2 === 1) { //调用store方法更新状态 this.props.store.dispatch({type: INCREMENT, data: number}) } } incrementAsync = () => { //1.得到选择的增加数量 const number = this.select.value * 1 //启动延时定时器 setTimeout(() => { this.props.store.dispatch({type: INCREMENT, data: number}) }, 1000) }; render() { const count = this.props.store.getState() // debugger return ( <div> <p>click {count} times</p> <div> <select ref={select => this.select = select}> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <button onClick={this.increment}>+</button> <button onClick={this.decrement}>-</button> <button onClick={this.incrementIfOdd}>increment odd</button> <button onClick={this.incrementAsync}>increment async</button> </div> </div> ) } }
app.jsx
/* * 包含所有action type的常量字符串 * */ export const INCREMENT = 'INCREMENT'; export const DECREMENT = 'DECREMENT';
action-tupes.js
/* * 包含n个reducer函数的模块 * */ export function counter(state = 0, action) { console.log('counter()', state, action) switch (action.type) { case 'INCREMENT': return state + action.data case 'DECREMENT': return state - action.data default: return state } }
reducers.jsx
39_redux_counter应用_redux版本的更多相关文章
- 45_redux_comment应用_redux版本_异步功能
/* * 包含所有action的type名称常量 * */ //添加评论 export const ADD_COMMENT = 'add_comment'; //删除评论 export const D ...
- 44_redux_comment应用_redux版本_同步功能
项目结构: components里面的东西没变,将app.jsx移动至containers中 /* * 包含所有action的type名称常量 * */ //添加评论 export const ADD ...
- 42_redux_counter应用_redux异步版本
前言: redux默认不支持异步编程,需要下载redux插件(异步中间件) 如何下载: npm install --save redux-thunk 项目结构: 代码: import React, { ...
- 40_redux_counter应用_redux完善版本
项目结构: 代码: import React from 'react'; import ReactDOM from 'react-dom'; import store from './redux/st ...
- 【AR实验室】OpenGL ES绘制相机(OpenGL ES 1.0版本)
0x00 - 前言 之前做一些移动端的AR应用以及目前看到的一些AR应用,基本上都是这样一个套路:手机背景显示现实场景,然后在该背景上进行图形学绘制.至于图形学绘制时,相机外参的解算使用的是V-SLA ...
- ABP入门系列(2)——通过模板创建MAP版本项目
一.从官网创建模板项目 进入官网下载模板项目 依次按下图选择: 输入验证码开始下载 下载提示: 二.启动项目 使用VS2015打开项目,还原Nuget包: 设置以Web结尾的项目,设置为启动项目: 打 ...
- 理解Maven中的SNAPSHOT版本和正式版本
Maven中建立的依赖管理方式基本已成为Java语言依赖管理的事实标准,Maven的替代者Gradle也基本沿用了Maven的依赖管理机制.在Maven依赖管理中,唯一标识一个依赖项是由该依赖项的三个 ...
- MIP 官方发布 v1稳定版本
近期,MIP官方发布了MIP系列文件的全新v1版本,我们建议大家尽快完成升级. 一. 我是开发者,如何升级版本? 对于MIP页面开发者来说,只需替换线上引用的MIP文件为v1版本,就可以完成升级.所有 ...
- 终于等到你:CYQ.Data V5系列 (ORM数据层)最新版本开源了
前言: 不要问我框架为什么从收费授权转到免费开源,人生没有那么多为什么,这些年我开源的东西并不少,虽然这个是最核心的,看淡了就也没什么了. 群里的网友:太平说: 记得一年前你开源另一个项目的时候我就说 ...
随机推荐
- windows7 64下redis安装
1.redis官方下载地址:https://redis.io/download redis 64位下载地址:https://github.com/ServiceStack/redis-windows, ...
- pip安装报错 解决办法
安装库时报错:Could not fetch URL https://pypi.python.org/simple/wheel/: 解决办法: pip --trusted-host pypi.pyt ...
- C 语言经典例子
1. 题目:有1.2.3.4个数字,能组成多少个互不相同且无重复数字的三位数?都是多少? 程序分析:可填在百位.十位.个位的数字都是1.2.3.4.组成所有的排列后再去 掉不满足条件的排列. #inc ...
- VS快捷键大全(总结了一些记忆的口诀)(转载)
相信.Net开发人员都想能够熟记各种VS快捷键以提高平时开发的效率,但苦于记忆能力太差而快捷键又特别多,特别烦,所以作罢! 下面我将简单介绍一下我记忆VS快捷键的一些方法,希望对大家有所帮助. 1.窗 ...
- MySQL:ERROR 1044 (42000): Access denied for user ''@'localhost' to database 'mysql'
ERROR 1044 (42000): Access denied for user ''@'localhost' to database 'mysql'. 原因是:mysql数据库的user表里,存 ...
- 关于FIFO memory buffer模块的设计
关于FIFO memory buffer模块的设计 FIFO memory `timescale 1ns / 1ps ///////////////////////////////////////// ...
- 新建服务器出现错误 Peer authentication failed for user "postgres" 的解决办法
用pgadmin3 新建服务器出现错误 Peer authentication failed for user "postgres" 在stackoverflow上找到答案,出现此 ...
- 使用Let's Encrypt搭建永久免费的HTTPS服务
1.概述1.1 HTTPS概述HTTPS即HTTP + TLS,TLS 是传输层加密协议,它的前身是 SSL 协议.我们知道HTTP协议是基于TCP的.简而言之HTTPS就是在TCP的基础上套一层TL ...
- 【json】与【枚举】的序列化和反序列化
参考:Jackson – Deserialization from json to Java enums 问题描述 java中使用枚举时,如果涉及到restful调用,不可避免会涉及到枚举的序列化和反 ...
- [转][SerialPort]测试用例
private void Form1_Load(object sender, EventArgs e) { var s = SerialPort.GetPortNames().OrderBy(r =& ...