react Redux 用Redux中央仓库实现一个todolist

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

//封装组件的action

import {ADD_ITEM , DELETE_ITEM ,GET_LIST} from ‘./actionTypes’ //定义type类型的js

import 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://www.easy-mock.com/mock/5d63d7ca5774121e1a634378/demo1/demo1’)

.then((res)=>

{

const data = res.data.data;

const action = getListAction(data)

dispatch(action) //将action这个值传给仓库

})

.catch((error)=>{

console.log(error)

})

}

}

TodoList.js  组件js部分

import React, { Component } from ‘react’;

import TodoListUi from ‘./TodoListUi’ //组件UI部分

import store from ‘…/store/index’ //组件中获得store中的数据

//import {ADD_ITEM , DELETE_ITEM} from ‘…/store/actionTypes’ //定义type类型的js 为了更方便检查错误 写错会报错

import { addItem,deleteItem,getTodoList } from ‘…/store/actionCreators’ //封装的action

//用reducer写todolist 调用中央仓库

class TodoList extends Component {

constructor(props){

super(props)

// console.log(store.getState()) //getState方法取出仓库的值

this.state = store.getState() //将组件state数据赋值给仓库数据

this.changeInputVlaue = this.changeInputVlaue.bind(this) //给方法做this绑定

this.storeChange = this.storeChange.bind(this)

this.clickBtn = this.clickBtn.bind(this)

this.deleteItem = this.deleteItem.bind(this)

store.subscribe(this.storeChange) //订阅模式 改变数据时同步让仓库中的数据改变

}

render() {

return (

<TodoListUi

value={this.state.value}

changeInputVlaue={this.changeInputVlaue}

clickBtn={this.clickBtn}

list={this.state.list}

deleteItem = {this.deleteItem}

);

}

componentDidMount(){

// axios.get(‘https://www.easy-mock.com/mock/5d63d7ca5774121e1a634378/demo1/demo1’)

// .then((res)=>

// {

// const data = res.data.data;

// const action =getListAction(data) //将取到的数据封入action

// store.dispatch(action) //传递给reducer

// })

// .catch((error)=>{

// console.log(error)

// })

const action = getTodoList() //使用中间件获取数据

store.dispatch(action) //传给仓库

}

//用户输入的值传给仓库 要通过dispatch()方法传递给store

//Action就是一个对象，这个对象一般有两个属性，第一个是对Action的描述，第二个是要改变的值。

//之前注销的方法，在reducer里深拷贝完state里面的数据，无法同步将用户输入赋值给state

changeInputVlaue(e){

this.setState({

value:e.target.value //将用户输入的value绑定给仓库中的value，监听用户输入

})

// const action = {

// type:‘changeInput’, // 名字

// value:e.target.value //值

// }

// store.dispatch(action)

}

//state和组件的值同步互相改变

storeChange(){

this.setState(store.getState())

}

//增加 因为list数据存在中央仓库里 所以要做的是 将组件数据传给仓库 改变仓库数据后 再返回给组件展示

clickBtn(){

// console.log(this.state.value)

// const action = {

// type:ADD_ITEM,

// value:this.state.value //获取到用户value，用于push

// }

const action = addItem(this.state.value);

store.dispatch(action)

}

//删除

deleteItem(index){

// console.log(index)

// const action = {

// type:DELETE_ITEM,

// index //index传过去用于删除

// }

const action =deleteItem(index)

store.dispatch(action)

}

}

export default TodoList;

TodoListUi.js 组件UI部分抽离成子组件

//此文件用于视图和逻辑的分离

import React from ‘react’;

import ‘antd/dist/antd.css’ //引入Ant Design UI库

import { Input ,Button,List} from ‘antd’ //引入input组件

//无状态组件 提高性能 将组件改造成函数

const TodoListUi = (props)=>{

return (

<Input

style={{ width:“250px”,marginRight:“20px”}}

onChange={props.changeInputVlaue}

value={props.value}

/>

增加

最后

文章到这里就结束了，如果觉得对你有帮助可以点个赞哦

antd’ //引入input组件

//无状态组件 提高性能 将组件改造成函数

const TodoListUi = (props)=>{

return (

<Input

style={{ width:“250px”,marginRight:“20px”}}

onChange={props.changeInputVlaue}

value={props.value}

/>

增加

最后

文章到这里就结束了，如果觉得对你有帮助可以点个赞哦

[外链图片转存中…(img-4G3cBlZe-1718716930962)]