本文实例为大家分享了react用Redux中央仓库实现一个todolist的具体代码，供大家参考，具体内容如下

Redux简单介绍

Redux是一个用来管理管理数据状态和UI状态的JavaScript应用工具。随着JavaScript单页应用（SPA）开发日趋复杂，JavaScript需要管理比任何时候都要多的state（状态），Redux就是降低管理难度的。（Redux支持React，Angular、jQuery甚至纯JavaScript）

ReduxDevTools插件Redux调试工具谷歌商店下载

redux三个坑：

store仓库必须是唯一的，多个store是坚决不允许，只能有一个store空间

只有store能改变自己的内容，Reducer不能改变

Reducer必须是纯函数

Redux-thunk这个Redux最常用的插件：

在Dispatch一个Action之后，到达reducer之前，进行一些额外的操作，就需要用到middleware（中间件）

在实际工作中你可以使用中间件来进行日志记录、创建崩溃报告，调用异步接口或者路由

npminstall--saveredux-thunk

第一步仓库在store文件夹下新建index.js

//applyMiddleware,compose是为了使用下面两个插件import {createStore,applyMiddleware,compose} from 'redux' //引入reduximport 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 //将仓库导出

新建reducer.js做仓库数据处理

import {ADD_ITEM , DELETE_ITEM , GET_LIST} from './actionTypes' //定义type类型的js文件 const defaultState = { value:'sss', list:[] //后端获取的列表数据放在这里} // state: 指的是原始仓库里的状态。// action: 指的是action新传递的状态。export default (state = defaultState,action)=>{ // console.log(state) //Reducer里只能接收state 不能改变state // if(action.type ==="changeInput"){ // let newState = JSON.parse(JSON.stringify(state)) //深拷贝state的值 转成字符串 赋值给一个变量 // newState.value = action.vlaue //改变placeholder的值等于用户输入的值 // return newState //将新state return出去 // } //增加 if(action.type === ADD_ITEM ){ //根据type值，编写业务逻辑 let newState = JSON.parse(JSON.stringify(state)) newState.list.push(action.value) //用户输入的新内容push新的内容到列表中去 console.log(action) newState.value = '' //增加后清空 return newState } //删除 if(action.type === DELETE_ITEM ){ let newState = JSON.parse(JSON.stringify(state)) newState.list.splice(action.index,1) //删除数组中对应的值 return newState } //后端获取数据 传递给中央仓库做处理 if(action.type === GET_LIST ){ let newState = JSON.parse(JSON.stringify(state)) newState.list =action.data return newState } return state}

actionTypes.js 集中管理页面reducer的type类型

//集中管理页面reducer的type类型 export const ADD_ITEM = "addItem" //定义常量一般用大写export const DELETE_ITEM = "deleteItem" export const GET_LIST = "getListAction"

actionCreators.js封装组件的action

//封装组件的actionimport {ADD_ITEM , DELETE_ITEM ,GET_LIST} from './actionTypes' //定义type类型的jsimport axios from 'axios' //组件addItem里的action type已经封好 所以把value作为参数用箭头函数(value)=>传进来即可 //增加数据export const addItem = (value)=>({ type:ADD_ITEM, value}) //删除数据export const deleteItem = (index)=>({ type:DELETE_ITEM, index}) //获取数据export const getListAction = (data)=>({ type:GET_LIST, data}) export const getTodoList = () =>{ return (dispatch)=>{ axios.get('https://ponent {// state = { }// render() { // return ( // <div style={{margin:"100px"}}>// <div>// <Input// style={{ width:"250px",marginRight:"20px"}}// onChange={this.props.changeInputVlaue}// value={this.props.value}// />// <Button type='primary' onClick={this.props.clickBtn}>增加</Button>// </div>// <div style={{margin:"10px",width:"300px"}}>// <List// bordered //加边框// dataSource={this.props.list} //渲染什么数据// renderItem={(item,index)=>(<List.Item onClick={()=>{this.props.deleteItem(index)}}>{item}</List.Item>)} //每项// /> // </div>// </div>// );// }// } export default TodoListUi;

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。