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

た入场券 2024-04-19 14:37 63阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODQwNDg5OQ_size_16_color_FFFFFF_t_70][]

### Redux简单介绍 ###

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

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

redux三个坑：

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

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

Reducer必须是纯函数

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

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

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

npm install --save redux-thunk

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

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

//封装组件的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}
                ></TodoListUi>
             );
        }
    
        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 ( 
            <div style={
       {margin:"100px"}}>
                <div>
                    <Input
                    style={
       { width:"250px",marginRight:"20px"}}
                    onChange={props.changeInputVlaue}
                    value={props.value}
                    />
                    <Button type='primary' onClick={props.clickBtn}>增加</Button>
                </div>
                <div style={
       {margin:"10px",width:"300px"}}>
                <List
                        bordered  //加边框
                        dataSource={props.list}  //渲染什么数据
                        renderItem={(item,index)=>(<List.Item onClick={()=>{props.deleteItem(index)}}>{item}</List.Item>)}  //每项
                    /> 
                </div>
            </div>
         );
    }
    
    //改造前组件  上边需要从react引入Component
    // class TodoListUi extends Component {
    //     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;

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODQwNDg5OQ_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/21e15d8eb52649d9a3864b89b2ce320d.png