react用Redux中央仓库实现一个todolist-创新互联
本文实例为大家分享了react用Redux中央仓库实现一个todolist的具体代码,供大家参考,具体内容如下
创新互联坚持“要么做到,要么别承诺”的工作理念,服务领域包括:网站建设、成都网站制作、企业官网、英文网站、手机端网站、网站推广等服务,满足客户于互联网时代的根河网站设计、移动媒体设计的需求,帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴!Redux简单介绍
Redux是一个用来管理管理数据状态和UI状态的JavaScript应用工具。随着JavaScript单页应用(SPA)开发日趋复杂,JavaScript需要管理比任何时候都要多的state(状态),Redux就是降低管理难度的。(Redux支持React,Angular、jQuery甚至纯JavaScript)
Redux Dev Tools插件 Redux调试工具 谷歌商店下载
redux三个坑:
store仓库必须是唯一的,多个store是坚决不允许,只能有一个store空间
只有store能改变自己的内容,Reducer不能改变
Reducer必须是纯函数
Redux-thunk这个Redux最常用的插件:
在Dispatch一个Action之后,到达reducer之前,进行一些额外的操作,就需要用到middleware(中间件)
在实际工作中你可以使用中间件来进行日志记录、创建崩溃报告,调用异步接口或者路由
npm install --save redux-thunk
第一步 仓库 在store文件夹下新建index.js
//applyMiddleware,compose是为了使用下面两个插件 import {createStore,applyMiddleware,compose} from 'redux' //引入redux import thunk from 'redux-thunk' //引入redux中间件插件 import reducer from './reducer' //引用reducer中的数据 //浏览器安装的仓库插件 调试面板 const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}):compose //redux中间件插件 此函数为了兼容两个插件并行 const enhancer = composeEnhancers(applyMiddleware(thunk)) //定义一个仓库 唯一的 不能有两个仓库 createStore仓库只接收两个参数 const store = createStore( reducer, enhancer) // 创建数据存储仓库 export default store //将仓库导出
名称栏目:react用Redux中央仓库实现一个todolist-创新互联
网页地址:http://ybzwz.com/article/cshojg.html