前言

Redux 是一个状态管理框架，通常与 React 结合使用，来实现 React 的状态集中统一化管理。但是与 Vuex 不同的是，Redux 也可以独立使用。并不专职为 React 服务。而 Vuex 主要是为 Vue 专门制定的状态管理工具。
在使用前执行npm install redux react-redux下载 Redux。

案例需求

实现一个 todoList （代办事项管理），包含的功能有：

添加待办事项；
编辑待办事项状态(将待办事项置为已完成或者未完成)；
删除待办事项；
查询待办事项（按状态已完成/未完成/所有查询）。

实现思路

一共分为三个组件实现该功能。
TodoList.js 为核心组件父组件，提供添加待办事项的方法。
TodoItem.js 为任务项组件，渲染任务项视图，提供修改待办事项状态及删除任务的方法。
FilterItem.js 为过滤器组件，渲染过滤项视图。提供筛选待办事项的方法。

第一步：定义 Action

action 定义用户行为类型以及该行为所需要的参数。在整个 todolist 程序中，抽象出来的用户行为有：用户添加待办事项、用户改变待办事项状态、用户删除待办事项、用户筛选待办事项。

 let count = 0;
let actions = {//添加任务addTodo: (text)=>{return {type: 'add', payload:{text:text,id:++count,done:false}};},//删除任务delTodo: (index)=>{return {type: 'del', index};},//修改任务状态changeStatus:(item)=>{return {type: 'change', item};},//过滤任务列表onFilter:(flag)=>{return {type: 'filter', flag};}
};
export default actions;

第二步：定义 Reducer

reduce 表示根据用户行为，响应不同的状态，然后根据状态更新视图。在整个 todolist 程序中，抽象出来的响应状态有：

新增/删除/更改代办事项之后更新待办事项列表，定义 todosReducers；

const todosReducer = (state = [],action)=>{switch (action.type) {case 'add':state = [...state, action.payload];return [...state];case 'del':state.splice(action.index,1);return [...state];case 'change':action.item.done = !action.item.done;return [...state];default:return state;}
};
export default todosReducer;

根据用户的筛选条件查询出符合条件的待办事项列表，定义 filterReducers。

const filterReducer = (state ="all", action)=>{switch (action.type) {case 'filter':if(action.flag == 'all'){state = 'all';};if(action.flag == 'completed'){state = true;};if(action.flag == 'uncompleted'){state = false;};return state;default:return state;}
};
export default filterReducer;

第三步：整合 Reducer

通过 combineReducers 方法将单个的 Reducer 整合到一起，定义allReducers。

import {combineReducers} from 'redux';
import filterReducer from './filterReducer';
import todosReducer from './todosReducer';
const allReducers  = combineReducers({filter:filterReducer,todos:todosReducer});
export default allReducers;

第四步：定义 Store

store 是储存状态的仓库，所有的 state ，reduce ，跟 redux 相关的 API 等都是储存在 store 中。

import {createStore} from 'redux';
import allReducers from './allReducers';
let store = createStore(allReducers);
export default store;

第五步：处理业务逻辑

TodoList.js 为核心组件父组件，渲染了待办事项列表和过滤器，并且提供添加待办事项的方法。

TodoList.js

import React from 'react';
import TodoItem from './component/TodoItem';
import Filter from './component/FilterItem';
import {connect} from 'react-redux';
import actions from './store/actions';
class TodoList extends React.Component {constructor(props) {super(props);this.status =[{label:"所有",flag:"all"},{label:"已完成",flag:"completed"},{label:"未完成",flag:"uncompleted"},]}add(){var value = this.refs.input.value;const {addTodo} = this.props;addTodo(value);}render() {const {todos} = this.props;return <div><input type="text" ref="input"/><button onClick={()=>this.add()}>添加任务</button>{todos.map((item,index)=>{return <TodoItemitem={item}key={index}index={index}/>})}<div className="list-mt-20">{this.status.map((item,index)=>{return <Filteritem={item}key={index}/>})}</div></div>}
}
const mapStateToProps = (state)=>{return{todos:state.todos};
};
const mapDispatchToProps = (dispatch)=>{return {addTodo:(val)=>dispatch(actions.addTodo(val))}
};
export default connect(mapStateToProps,mapDispatchToProps)(TodoList);

TodoItem.js 为任务项组件，渲染单条任务项视图，提供修改待办事项状态及删除任务的方法。

TodoItem.js

import React from 'react';
import '../index.css';
import {connect} from 'react-redux';
import actions from '../store/actions';
class TodoItem extends React.Component {constructor(props) {super(props);}del(index){const {delTodo} = this.props;delTodo(index);}changeStatus(item){const {changeStatus} = this.props;changeStatus(item);}render() {const {item,index,filter} = this.props;return(<div>{filter == 'all'?<div><span className={item && item.done?'list-line':''} onClick={() => this.changeStatus(item)}>{item.text}</span><button onClick={() => this.del(index)}>删除</button></div>:(filter == item.done?<div><span className={item && item.done?'list-line':''} onClick={() => this.changeStatus(index)}>{item.text}</span><button onClick={() => this.del(index)}>删除</button></div>:null)}</div>)}
}
const mapStateToProps  = (state)=>{return{filter:state.filter,todos:state.todos,};
};
const mapDispatchToProps  = (dispatch)=>{return {delTodo:(index)=>dispatch(actions.delTodo(index)),changeStatus:(item)=>dispatch(actions.changeStatus(item)),}
};
export default connect(mapStateToProps,mapDispatchToProps)(TodoItem);

FilterItem.js 为过滤器组件，渲染过滤项视图。提供筛选待办事项的方法。

FilterItem.js

import React from 'react';
import '../index.css';
import {connect} from 'react-redux';
import actions from '../store/actions';
class Filter extends React.Component {constructor(props) {super(props);}filter(flag){const {onFilter} = this.props;if(onFilter){onFilter(flag);}}render() {const {item} = this.props;return<span className="filter-mr-20" onClick={()=>this.filter(item.flag)}>{item.label}</span>}
}
const mapStateToProps = (state)=>{return{filter:state.filter,};
};
const mapDispatchToProps = (dispatch)=>{return {onFilter:(flag)=>dispatch(actions.onFilter(flag))}
};
export default connect(mapStateToProps,mapDispatchToProps)(Filter);

第六步：注意事项

项目中所用到的 connect 方法来自于 Redux 库。该方法是一个高阶组件，接收当前业务逻辑需要用到的 state 和 props 作为第一阶参数，接收当前业务组件作为第二阶参数。处理之后的结果是将所有的 state 和 props 作为 props 注入到当前业务组件中。

Redux 使用指南（todoList 案例）相关推荐

Vuex 使用指南（todoList 案例）
Vuex 使用指南前言案例需求第一步:state 第二步:Getter 第三步:Mutation 第四步:Action 第五步:属性或者方法整合实现功能前言 Vuex 是为 Vue 专门制定 ...
Vue之Todolist案例和ES6语法
2.7 Todolist案例 2.7.1 准备工作 <!DOCTYPE html> <html> <head><meta charset="utf- ...
Vue.js-Day02-AM【Vue表单、核心指令（单选框、密码框、多行文本框、单选、多选、勾选、下拉列表）、组件汇总案例、ToDoList案例、计算属性(computed)、watch监听】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 目录 1.Vue表单原生JS实现异步表单提交运行截图代码核心指令单选框.密码框.多行文本框单选多选勾 ...
HTML5与CSS3权威指南笔记案例1
第1章 <!DOCTYPE html> <meta charset = "UTF-8"> <title> Search </title&g ...
react-redux图解_如何将React连接到Redux —图解指南
react-redux图解 by Princiya 由Princiya 如何将React连接到Redux -图解指南 (How to connect React to Redux - a diagra ...
Vue版todolist案例
Vue版todolist案例 todolist – 记录你的待办事项 <!DOCTYPE html> <html><head><meta charset=&q ...
vue2.0-脚手架-todolist案例
一 vue脚手架2.0 安装 npm install vue-cli -g 查阅一下脚手架可支持的模板 vue list可以查到 template-name 使用脚手架生成项目(以下命令得运行在项目的 ...
【Vue2.0】— TodoList案例（十七）
[Vue2.0]- TodoList案例(十七) <template><div id="root"><div class="todo-con ...
尚硅谷todolist案例
vue todolist案例 1 拆分组件一共拆分为4个组件 TodoHeader TodoItem TodoList TodoFooter item是list的子组件 2 组件化编码流程实现静态 ...

Redux 使用指南（todoList 案例）

Redux 使用指南

前言