react-redux: counter
store:
import {createStore,applyMiddleware, compose} from "redux";
import thunk from "redux-thunk";
import rootReducer from "./reducers/rootReducer"; const middlewares = [
applyMiddleware(thunk)
];
const store = initialState => createStore(rootReducer, initialState, compose(...middlewares)); export default store;
rootReducer:
import {combineReducers} from "redux";
import {reducer as toastr} from "react-redux-toastr"; const rootReducer = combineReducers({
toastr,
counterReducer
}); export default rootReducer;
counterReducer:
import * as types from "../actions/actionType"; const initialState = {
count: 0
}; const counterReducer = function (state = initialState, action) {
const count = state.product;
switch (action.type) {
case types.INCREMENT:
return {count: count + 1};
case types.DECREMENT:
return {count: count - 1};
default:
return state; } }; export default counterReducer;
actionType:
export const INCREMENT = 'INCREMENT';
export const DECREMENT = 'DECREMENT';
Counter:
import {connect} from "react-redux";
import * as types from "actions/actionType"; const mapStatetoProps = state =>{
return {
value: state.counterReducer.count
}
}
const mapDispatchToProps =dispatch => {
return {
onIncrement: ()=>dispatch({type: types.INCREMENT}),
onDecrement: ()=>dispatch({type: types.DECREMENT})
}
} class Counter extends React.Component {
render() {
const {count, onIncrement, onDecrement} = this.props;
return (
<div>
<span>{count}</span>
<button onClick={onIncrement}>+</button>
<button onClick={onDecrement}>-</button>
</div>
)
}
}
const CounterContainer = connect(
mapStateToProps,
mapDispatchToProps
)(Counter)
export default CounterContainer;
counterAction:
import * as types from "./actionType";
export function increment(count) {
return {
type: types.INCREMENT,
count
}
}
export function decrement(count) {
return {
type: types.DECREMENT,
count
}
}
onIncrement: ()=>dispatch({type: types.INCREMENT}) =》
onIncrement: (count)=>dispatch(actions.increment(count)),
use redux-actions:
import {createAction} from "redux-actions";
import * as types from "./actionType";
export const increment = createAction(types.INCREMENT);
export const decrement = createAction(types.DECREMENT);
Redux Thunk 中间 件 可以 让 action 创建 函数 先不 返回 action 对象, 而是 返回 一个 函数。 通过 这个 函数 延迟 dispatch 或者 只在 满足 指定 条件 的 情况下 dispatch。 这个 内部 函数 接受 store 的 两个 方法 dispatch 和 getState 作为 参数。
update action:
import {createAction} from "redux-actions"; import * as types from "../../constant/ActionType"; export const increment = createAction(types.INCREMENT);
export const decrement = createAction(types.DECREMENT); export function incrementIfOdd() {
return (dispatch, getStore) => {
const count = getStore().CounterReducer.count;
if (count % 2 ==0) {
return
}
dispatch(increment())
}
}
update container :
import React from "react";
import {connect} from "react-redux";
import {Row, Col, Button} from "antd"; import * as actions from "../../reduxModel/actions/CounterAction";
import "./index.scss"; const mapStateToProps = state => {
return {value: state.CounterReducer.count}
};
const mapDispatchToProps = {
onIncrement: actions.increment,
onDecrement: actions.decrement,
onIncrementIfOdd: actions.incrementIfOdd
}; class Home extends React.Component{ render() {
const {value, onIncrement, onDecrement, onIncrementIfOdd} = this.props;
return (
<div className="app-home">
<div className="app-layout-container">
<Row type="flex" justify="center" className="app-layout-body">
<Col span={4}>
sidebar
</Col>
<Col span={20} className="page-panel">
welcome Home
<div className="form-btn-group">
<span>{value}</span>
<Button type="dashed" htmlType="button" onClick={onIncrement}>+</Button>
<Button type="dashed" htmlType="button" onClick={onDecrement}>-</Button>
<Button type="dashed" htmlType="button" onClick={onIncrementIfOdd}>add if odd</Button>
</div>
</Col>
</Row>
</div>
</div>
)
}
}
const HomeContainer = connect(
mapStateToProps,
mapDispatchToProps
)(Home); export default HomeContainer;
react-redux: counter的更多相关文章
- react+redux教程(六)redux服务端渲染流程
今天,我们要讲解的是react+redux服务端渲染.个人认为,react击败angular的真正“杀手锏”就是服务端渲染.我们为什么要实现服务端渲染,主要是为了SEO. 例子 例子仍然是官方的计数器 ...
- react+redux教程(四)undo、devtools、router
上节课,我们介绍了一些es6的新语法:react+redux教程(三)reduce().filter().map().some().every()....展开属性 今天我们通过解读redux-undo ...
- react+redux教程(一)connect、applyMiddleware、thunk、webpackHotMiddleware
今天,我们通过解读官方示例代码(counter)的方式来学习react+redux. 例子 这个例子是官方的例子,计数器程序.前两个按钮是加减,第三个是如果当前数字是奇数则加一,第四个按钮是异步加一( ...
- React+Redux学习笔记:React+Redux简易开发步骤
前言 React+Redux 分为两部分: UI组件:即React组件,也叫用户自定义UI组件,用于渲染DOM 容器组件:即Redux逻辑,处理数据和业务逻辑,支持所有Redux API,参考之前的文 ...
- react案例->新闻移动客户端--(react+redux+es6+webpack+es6的spa应用)
今天分享一个react应用,应在第一篇作品中说要做一个react+redux+xxx的应用.已经做完一部分,拿出来分享.github地址为:点我就可以咯~ 这里实现了一个新闻移动站的spa.本来想写p ...
- React Redux 与胖虎
这是一篇详尽的 React Redux 扫盲文. 对 React Redux 已经比较熟悉的同学可以直接看 <React Redux 与胖虎他妈>. 是什么 React Redux 是 R ...
- webpack+react+redux+es6开发模式
一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入 ...
- react+redux教程(五)异步、单一state树结构、componentWillReceiveProps
今天,我们要讲解的是异步.单一state树结构.componentWillReceiveProps这三个知识点. 例子 这个例子是官方的例子,主要是从Reddit中请求新闻列表来显示,可以切换reac ...
- react+redux官方实例TODO从最简单的入门(6)-- 完结
通过实现了增-->删-->改-->查,对react结合redux的机制差不多已经了解,那么把剩下的功能一起完成吧 全选 1.声明状态,这个是全选状态 2.action约定 3.red ...
- react+redux官方实例TODO从最简单的入门(1)-- 前言
刚进公司的时候,一点react不会,有一个需求要改,重构页面!!!完全懵逼,一点不知道怎么办!然后就去官方文档,花了一周时间,就纯react实现了页面重构,总体来说,react还是比较简单的,由于当初 ...
随机推荐
- PHP函数的创建
看代码 PHP函数的创建,包括参数,和其他的语言一样 <?php #PHP crate function function writeName($name) { echo 'Name is '. ...
- Python-Cpython解释器支持的进程与线程
一.Python并发编程之多进程 1. multiprocessing模块介绍 python中的多线程无法利用多核优势,如果想要充分地使用多核CPU的资源(os.cpu_count()查看),在pyt ...
- SqlAlchemy基本
安装SQLAlchemy: $ easy_install sqlalchemy 数据库表是一个二维表,包含多行多列 [ ('1', 'Michael'), ('2', 'Bob'), ('3', 'A ...
- Delphi 正则表达式语法(1): 关于大小写与中文
Delphi 正则表达式语法(1): 关于大小写与中文 //替换一般字符串 var reg: TPerlRegEx; begin reg := TPerlRegEx.Create(nil); ...
- 【转】Python爬虫(7)_scrapy-redis
scrapy-redis使用以及剖析 scrapy-redis是一个基于redis的scrapy组件,通过它可以快速实现简单分布式爬虫程序,该组件本质上提供了三大功能: scheduler - 调 ...
- Java程序设计基础
Java程序设计基础
- 发送邮件——stamplib
配置文email.ini件信息: [email]sender=xxxxxxxxxxxpwd=xxxxxxxxxxxxreciver=xxxxxxxxxxxxxpython 3.x代码如下: impor ...
- 关于comparable接口
参考博客: https://blog.csdn.net/nvd11/article/details/27393445 第一个例子 @Test public void fun1(){ List list ...
- gh-ost原理
gh-ost原理 一.三种模式架构图 1.连上从库,在主库上修改 这是gh-ost默认的工作模式,它会查看从库情况,找到集群的主库并且连接上去,对主库侵入最少,大体步骤是: 在主库上创建_xxx_gh ...
- 非法字符: '\ufeff' 解决方案|错误: 需要class, interface或enum
解决方案,把文件用Editplus打开,UTF-8+BOM编码的文件转为普通的UTF-8文件