Redux-devtools插件

Redux DevTools是一个开源项目,是为谷歌浏览器用户打造的一款实用调试插件,主要适用于开发者使用,使用该插件可以有效地对应用程序或者网页的状态进行调试操作。

我上传到CSDN，下载链接：https://download.csdn.net/download/weixin_44510615/13130629

因为我是window系统，需要添加window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()

Redux

原理：React首先改变store里面的数据state，先要开发一个Aciton，然后通过dispath方法传递给store，store再把之前的数据和Action转化的数据在Reducers进行判断和对比，Reducers本身就是一个函数，返回新的state，store就替换之前的state。

下面举添加点击的Redux的工作流流程。

具体代码

TodoList.js

import React, {Component } from 'react'
import 'antd/dist/antd.css'
import { Input,Button, List  } from 'antd';
// import store from './store'相当于导入store/index,js
import store from './store';class TodoList extends Component {constructor(props) {super(props)this.state = store.getState()this.handleInputChange = this.handleInputChange.bind(this)this.handleStoreChange = this.handleStoreChange.bind(this)this.handleBtnClick = this.handleBtnClick.bind(this)store.subscribe(this.handleStoreChange);console.log( this.state)}render() {return(<div><div><Input value={this.state.inputValue}placeholder="Todo info" style={{width:'300px',marginRight:'10px' }}onChange={this.handleInputChange}></Input><Button type="primary"onClick={this.handleBtnClick}>提交</Button></div><Listborderedstyle={{width:'300px',marginTop:'10px' }}dataSource={this.state.list}renderItem={(item,index) => (<List.Item onClick={this.handleItemDelete.bind(this,index)}>{item}</List.Item>)}/></div>)}handleInputChange(e) {const action = {type: 'change_input_value',value: e.target.value}store.dispatch(action)}handleStoreChange() {this.setState(store.getState());}handleBtnClick() {const action = {type: 'add_todo_item',}store.dispatch(action)}handleItemDelete(index) {const action = {type: 'delete_todo_item',index}store.dispatch(action)}
}export default TodoList;

reducer.js

/* eslint-disable import/no-anonymous-default-export */
const defaultState = {inputValue : '123',list: [1,2]}export default (state = defaultState , action) => {if (action.type === 'change_input_value'){const newState = JSON.parse(JSON.stringify(state));newState.inputValue = action.valuereturn newState}if (action.type === 'add_todo_item'){const newState = JSON.parse(JSON.stringify(state));newState.list.push(newState.inputValue)newState.inputValue ='';return newState}if (action.type === 'delete_todo_item'){const newState = JSON.parse(JSON.stringify(state));newState.list.splice(action.inbdex,1)return newState}return state;
}

index.js

import { createStore } from 'redux';
import reducer from './reducer';const store = createStore(reducer,window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());export default store;

ActionTypes和ActionCreator拆分

由于全部代码在TodoList.js写死了，不容易维护，需要进行ActionTypes和ActionCreator拆分

具体目录如下

TodoList.js

import React, {Component } from 'react'
import 'antd/dist/antd.css'
import { Input,Button, List  } from 'antd';
// import store from './store'相当于导入store/index,js
import store from './store';
import { getInitList, getInputChangeAction, getAddItemAction, getDeleteItemAction } from './store/actionCreators'class TodoList extends Component {constructor(props) {super(props)this.state = store.getState()this.handleInputChange = this.handleInputChange.bind(this)this.handleStoreChange = this.handleStoreChange.bind(this)this.handleBtnClick = this.handleBtnClick.bind(this)store.subscribe(this.handleStoreChange);console.log( this.state)}render() {return(<div><div><Input value={this.state.inputValue}placeholder="Todo info" style={{width:'300px',marginRight:'10px' }}onChange={this.handleInputChange}></Input><Button type="primary"onClick={this.handleBtnClick}>提交</Button></div><Listborderedstyle={{width:'300px',marginTop:'10px' }}dataSource={this.state.list}renderItem={(item,index) => (<List.Item onClick={this.handleItemDelete.bind(this,index)}>{item}</List.Item>)}/></div>)}componentDidMount() {const action = getInitList();store.dispatch(action);}handleInputChange(e) {const action = getInputChangeAction(e.target.value);store.dispatch(action);}handleStoreChange() {this.setState(store.getState());}handleBtnClick() {const action = getAddItemAction();store.dispatch(action);}handleItemDelete(index) {const action = getDeleteItemAction(index);store.dispatch(action);}
}export default TodoList;

actionCreators.js

import { GET_INIT_LIST, CHANGE_INPUT_VALUE, ADD_TODO_ITEM, DELETE_TODO_ITEM, INIT_LIST_ACTION } from './actionTypes';export const getInputChangeAction = (value) => ({type: CHANGE_INPUT_VALUE,value
});export const getAddItemAction = () => ({type: ADD_TODO_ITEM
});export const getDeleteItemAction = (index) => ({type: DELETE_TODO_ITEM,index
});export const initListAction = (data) => ({type: INIT_LIST_ACTION,data
});export const getInitList = () => ({type: GET_INIT_LIST
});

actionTypes.js

export const CHANGE_INPUT_VALUE = 'change_input_value';
export const ADD_TODO_ITEM = 'add_todo_item';
export const DELETE_TODO_ITEM = 'delete_todo_item';
export const INIT_LIST_ACTION = 'init_list_action';
export const GET_INIT_LIST = 'get_init_list';

reducer.js

import { INIT_LIST_ACTION, CHANGE_INPUT_VALUE, ADD_TODO_ITEM, DELETE_TODO_ITEM } from './actionTypes'const defaultState = {inputValue: '',list: []
}// reducer 可以接受state，但是绝不能修改state
// 纯函数指的是，给定固定的输入，就一定会有固定的输出，而且不会有任何副作用
export default (state = defaultState, action) => {if (action.type === CHANGE_INPUT_VALUE) {const newState = JSON.parse(JSON.stringify(state));newState.inputValue = action.value;return newState;}if (action.type === INIT_LIST_ACTION) {const newState = JSON.parse(JSON.stringify(state));newState.list = action.data;return newState;}if (action.type === ADD_TODO_ITEM) {const newState = JSON.parse(JSON.stringify(state));newState.list.push(newState.inputValue);newState.inputValue = '';return newState;}if (action.type === DELETE_TODO_ITEM) {const newState = JSON.parse(JSON.stringify(state));newState.list.splice(action.index, 1);return newState;}return state;
}

七十九、TodoList示例深入Redux的工作流相关推荐

JavaScript学习（七十九）—值传递和地址传递
JavaScript学习(七十九)-值传递和地址传递一.值传递二.地址传递
【genius_platform软件平台开发】第七十九讲：Linux系统中可执行程序后台运行的几种方式
[genius_platform软件平台开发]第七十九讲:Linux系统中可执行程序后台运行的几种方式 1. 问题描述 2. & 符号 3. nohup指令 4. ctrl + z.jobs. ...
osgEarth的Rex引擎原理分析（七十九）如何加载百度、高德、谷歌、微软的在线地图
目标:(七十八)中的问题155 瓦片生成后,就是一堆图片.怎么对这堆图片进行编号,是目前主流互联网地图商分歧最大的地方.总结起来分为四个流派: 谷歌XYZ:Z表示缩放层级,Z=zoom:XY的原点在左 ...
数据库管理-第七十九期儿童节惊魂（20230601）
数据库管理 2023-06-01 第七十九期儿童节惊魂 1 主板挂了? 2 时间同步 3 数据库参数 4 ACFS 5 两个错误总结第七十九期儿童节惊魂 6月第一天,又是儿童节,加上客户现场来 ...
★【世龙最爱之作】☆【丑丫头变身美女校花,不恋情的人懊恼,可是有了爱情之后更烦恼】第七十九章★
丑丫头变身美女校花第七十九章全部烧烤大餐,终极仍是以快活满意的主旋律,在一个半小时之后完善的停止了.合法大家都整理筹备散场的时候. 沈芳突然道:"要不,大家去唱歌吧?" 吴以默立 ...
Android开发笔记（七十九）资源与权限校验
硬件资源因为移动设备的硬件配置各不相同,为了防止使用了不存在的设备资源,所以要对设备的硬件情况进行检查.一般情况下,前置摄像头.部分传感器在低端手机上是没有的,像SD卡也可能因为用户没插卡使得找不到 ...
《东周列国志》第七十九回归女乐黎弥阻孔子栖会稽文种通宰嚭
话说齐侯自会夹谷归后,晏婴病卒.景公哀泣数日,正忧朝中乏人,复闻孔子相鲁,鲁国大治,惊曰:"鲁相孔子必霸,霸必争地,齐为近邻,恐祸之先及,奈何?"大夫黎弥进曰:"君患孔子 ...
一个屌丝程序猿的人生（七十九）
第二天,林萧还不到7点,就从床上爬了起来. 虽说和公司约好的面试时间是10点,距离开始还有3个多小时,但林萧昨天查了下路线,路上要转一趟公交车,而且要途径差不多15个公交站,虽说地图上写的预估时间是1 ...
WPF入门教程系列十九——ListView示例(一)
经过前面的学习,今天我做一个比较综合的WPF程序示例,主要包括以下功能: 1) 查询功能.从数据库(本地数据库(local)/Test中的S_City表中读取城市信息数据,然后展示到WPF的Windo ...

七十九、TodoList示例深入Redux的工作流

文章目录

Redux-devtools插件

Redux

ActionTypes和ActionCreator拆分

七十九、TodoList示例深入Redux的工作流相关推荐

最新文章

热门文章

七十九、TodoList示例 深入Redux的工作流

文章目录

Redux-devtools插件

Redux

ActionTypes和ActionCreator拆分

七十九、TodoList示例 深入Redux的工作流相关推荐

最新文章

热门文章

七十九、TodoList示例深入Redux的工作流

七十九、TodoList示例深入Redux的工作流相关推荐