React第三方组件5(状态管理之Redux的使用②TodoList上)
时间:2022-05-08
本文章向大家介绍React第三方组件5(状态管理之Redux的使用②TodoList上),主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
本教程总共6篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章!
1、React第三方组件5(状态管理之Redux的使用①简单使用)---2018.03.20
2、React第三方组件5(状态管理之Redux的使用②TodoList上)---2018.03.21
3、React第三方组件5(状态管理之Redux的使用③TodoList中)---2018.03.22
4、React第三方组件5(状态管理之Redux的使用④TodoList下)---2018.03.23
5、React第三方组件5(状态管理之Redux的使用⑤异步操作)---2018.03.26
6、React第三方组件5(状态管理之Redux的使用⑥Redux DevTools)---2018.03.27
开发环境:Windows 8,node v8.9.1,npm 5.5.1,WebStorm 2017.2.2
1、先把redux1复制一份为redux2,并在路由里添加
import React from 'react';
import {HashRouter, Route, NavLink, Redirect} from 'react-router-dom';
import Redux1 from './redux1/Index'
import Redux2 from './redux2/Index'
const Index = ({match}) =>
<HashRouter>
<div>
<div className="nav">
<NavLink to="/Redux/Redux1" activeClassName="selected">Redux1</NavLink>
<NavLink to="/Redux/Redux2" activeClassName="selected">Redux2</NavLink>
</div>
<Route exact path={`${match.url}`}
render={() => (<Redirect to={`${match.url}/Redux1`}/>)}/>
<Route path={`${match.url}/Redux1`} component={Redux1}/>
<Route path={`${match.url}/Redux2`} component={Redux2}/>
</div>
</HashRouter>
;
export default Index;
2、编写业务代码 redux2 -> Index.jsx
import React from 'react';
import {createStore} from 'redux';
import {Provider, connect} from 'react-redux';
import reducer from './reducer'
const store = createStore(reducer);
class Index extends React.Component {
render() {
return (
<div className="todoList">
<input type="text" ref="todoInput"/>
<button onClick={() => this.props.dispatch({type: 'ADD', title: this.refs['todoInput'].value})}>添加
</button>
{
this.props.storeState.list.map(data => <li key={data.id}>{data.title}</li>)
}
</div>
);
}
}
const mapStateToProps = state => ({storeState: state});
const Main = connect(
mapStateToProps
)(Index);
export default () =>
<Provider store={store}>
<Main/>
</Provider>
;
3.修改reducer.js
export default (state = {
list: []
}, action)=> {
switch (action.type) {
/*业务模型判断*/
case 'ADD':
if (!action.title) {
alert('不能为空');
return state;
}
let list = state.list;
list.push({id: state.list.length + 1, title: action.title, status: 1});
return {list};
default:
return state;
}
};
4、看下浏览器效果
- Java基础11 对象引用
- maven 3.3.9 for windows 配置
- JS魔法堂:再次认识Function.prototype.call
- MySQL(六)之MySQL常用操作符
- 无人驾驶的基本算法及简单介绍
- CentOS6.5安装Java 8以及Tomcat8
- Java基础06 组合
- 警告:MySQL-server-5.6.21-1.linux2.6.x86_64.rpm: 头V3 DSA/SHA1 Signature, 密钥 ID 5072e1f5: NOKEY
- MySQL(五)之DDL(数据定义语言)与六大约束
- Java基础08 继承
- 关于python字典类型最疯狂的表达方式
- centos6.5使用yum安装mysql
- Java基础09 类数据与类方法
- MySQL(四)之MySQL数据类型
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- echo-高性能,可扩展,极简的Go Web框架
- 小程序文字显示换行
- css Backgroud-clip (文字颜色渐变)
- 微信小程序 buton清除默认样式
- 正则replace 回调函数里接收的参数是什么?
- 微信小程序使用pako.js的踩坑笔记
- Koa - 初体验(写个接口)
- Koa - 中间件(理解中间件、实现一个验证token中间件)
- Koa - 使用koa-multer上传文件(上传限制、错误处理)
- 原生js 复制内容到剪切板
- Vue - watch高阶用法
- 小程序如何支持使用 async/await (构建npm版)
- require.context批量引入文件
- Node笔记 - process.cwd() 和 __dirname 的区别
- 小程序如何支持使用 async/await