React结合Redux实现Todolist
时间:2022-07-22
本文章向大家介绍React结合Redux实现Todolist,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
- redux工作流程
- store.js
建立redux状态仓库
import { createStore, combineReducers } from 'redux';
import {add, deleter} from './Reducers/TodoList';
/**
* 第一个参数是reducers 第二个参数是默认状态
* 所以还得建立reducers reducers主要是负责将新的状态返回到store里面 store负责更新
*/
export default createStore(combineReducers({
add,
deleter
}));
- todolist.js todolist的reducer
注意 reducers不要直接返回修改的state 需要返回的一个新的对象 否则内存地址指向的都是同一处
const states = {
list: [
{id: 1, name: '张三', age: 18},
{id: 2, name: '王五', age: 19},
{id: 3, name: '李四', age: 20},
],
test: 1
};
export const add = (state = states, action) => {
const {list} = state;
switch (action.type) {
case 'addTodoList':
list.push(action.payload);
return {
...state,
list
};
case 'deleteTodoList':
return {
...state,
list: list.filter((item, index) => {
return index !== action.payload
})
};
}
// 返回新的状态
return state;
};
const statesB = {
name: '张三'
};
export const deleter = (state = statesB, action) => {
console.log('deleter reducers')
switch (action.type) {
case 'change':
return {
...state,
name: action.payload
};
}
// 返回新的状态
return state;
};
- Todolist.js 组件实现
import React from 'react';
import store from '../store';
/**
* 如果单独使用redux的话 直接安装redux的包 进行简单状态管理
* 使用store提供subscribe订阅状态更新 状态更新后使用更新组件
*/
class TodoList extends React.Component {
constructor(props){
super(props);
this.state = store.getState();
store.subscribe(this.changeState);
}
changeState = () => {
console.log(11)
this.setState(store.getState())
};
deleter = (index) => {
store.dispatch({
type: 'deleteTodoList',
payload: index
})
};
add = () => {
store.dispatch({
type: 'addTodoList',
payload: {
id: 4,
name: '赵六',
age: 1
}
})
};
change = (e) => {
store.dispatch({
type: 'change',
payload: '王五'
})
};
render() {
const {
list
} = this.state.add;
const {
name
} = this.state.deleter;
console.log(this.state)
return (
<div>
<h1>{name}</h1>
<button onClick={this.add}>增加</button>
<button onClick={this.change}>change</button>
{
list.map((item, index) => {
return <div key={item.id} style={{display: 'flex', justifyContent: "center"}}>
<div>{item.name}</div>
<div>{item.age}</div>
<button onClick={this.deleter.bind(this, index)}>删除</button>
</div>
})
}
</div>
);
}
}
export default TodoList
实现效果:
使用了redux进行状态管理 删除一个用户首先dispatch了一个deleteTodoList的 action 然后在reducer中返回删除后的数据 store更新数据 组件订阅了store的更新后 更新了内部状态 页面更新成功
代码解析:
- 创建Store
createStore(Reducers) 利用Reducers创建一个Store 第二个参数是默认的初始化参数 利
合并多个Reducers。 会将所有reducers执行一遍获取初始状态 如果没有可以利用createStore 第二个参数设置默认参数
只要是dispatch的action 就会触发所有的reducers
const todoApp = combineReducers({
// visibilityFilter,
name1:todos,
})
用getState() 获取的键是导出时候的对应值 即name1 需要注意
- 执行Action
利用创建好的store
Store.dispatch({
type: '', // 即会将这个类型传入reducers的第二个参数 action type为必传
value: '' // 参数随意 一般作用于参数传递
})
- Reducers处理
reducers作为纯函数
function r (prevState, action) {
// 第一个参数是上一次的状态。action是dispatch过来的值
// 返回新的状态给store进行更新
return {
... newState
}
}
注意: action和reducer之间并不存在一对一的关系。一个action是可以被多个模块的reducer处理的,尤其是当模块之间存在关联关系时,这种场景更为常见
本文为作者原创,手码不易,允许转载,转载后请以链接形式说明文章出处。
- Ruby(3):基本语法中
- Python(3):文件读写与异常
- 向ASP.NET Core迁移
- Gitlab CI 自动部署 asp.net core web api 到Docker容器
- 从XMLHttpRequest请求响应里getResponseHeader(header)报错:Refused to get unsafe header "**" 问题解决
- 全面理解 ASP.NET Core 依赖注入
- jq实现上传头像并实时预览功能
- 初探领域驱动设计(2)Repository在DDD中的应用
- js取整并保留两位小数的方法
- 异步编程 In .NET
- 判断标签是否包含class的方法
- vue.js使用props在父子组件之间传参
- JS中使用正则表达式替换对象里的大小写
- JS中const、var 和let的区别
- 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 数组属性和方法
- nuxt.js项目入门配置篇
- 高级综合工具StratusHLS学习笔记(4)
- 论文笔记&翻译——Enhanced LSTM for Natural Language Inference(ESIM)
- Day 5:用两个栈实现队列
- C++核心准则T.42:使用模板别名简化记法并隐藏实现细节
- Python实战——ESIM 模型搭建(keras版)
- MapReduce工作笔记——Job调度参数设置
- 矩阵操作试题(C++/Python)——矩阵元素逆时针旋转90度(升级版)
- Macdown中[toc]无法生成目录解决方法
- Linux实用技巧——mkdir创建多级新目录
- C++核心准则T.43: 定义别名时,using比typedef更好
- C++核心准则T.44:使用函数模板推断类模板参数类型(如果可能)
- python函数——浅拷贝copy()以及深拷贝deepcopy()
- 数据结构算法操作试题(C++/Python)——两数之和
- C++核心准则T.46:要求模板参数最少是正规或半正规的