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 //将仓库导出