<center>使用redux完成todoList的删除功能</center>

秒速五厘米 2023-08-17 15:56 66阅读 0赞

1.没有把action单独拿出来的时候当大小写写错的时候很难找出错误  
而把action统一抽出来作为常量写入action-type中便于管理。  
2.在store文件夹下新建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'；

3.在组件中引入acitonTypes

import { CHANGE_INPUT_VALUE, ADD_TODO_ITEM, DELETE_TODO_ITEM } from './store/actionTypes';
     handleInputChange(e) {
        const action = {
          type: CHANGE_INPUT_VALUE,
          value: e.target.value
        }
        store.dispatch(action);
      }

4.在reducer中也引入

import { CHANGE_INPUT_VALUE, ADD_TODO_ITEM, DELETE_TODO_ITEM } from './actionTypes
    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 === ADD_TODO_ITEM) {
        const newState = JSON.parse(JSON.stringify(state));
        newState.list.push(newState.inputValue);
        newState.inputValue = '';
        console.log(newState);
        //reducer要return newState
        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;
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，66人围观）

还没有评论，来说两句吧...

相关阅读

相关 <center>Vue的生命周期center>

*Vue的生命周期** -------------------- **beforeCreate**（创建前）在数据观测和初始化事件还未开始 **created*...

今天药忘吃喽~/ 2024年04月20日 10:19/ 0 赞/ 28 阅读

相关 <center>使用React过程中的那些坑center>

使用react两年过程中，遇到了各种坑在使用React框架开发项目的过程中，遇到各种各样的bug，每次定位bug查找原因都花了不少时间，并且遇到相同bug的概率特别大...

刺骨的言语ヽ痛彻心扉/ 2024年04月20日 00:19/ 0 赞/ 28 阅读

相关 P09:用Redux实现ToDoList的删除功能

Redux 基础阐述绑定子项响应事件在方法里编写Redux的Action reducer业务逻辑的实现 demo demo

Bertha 。/ 2023年10月06日 20:54/ 0 赞/ 9 阅读

相关 <center>redux-saga框架使用详解center>

什么是redux-saga redux-saga 是一个用于管理 Redux 应用异步操作的中间件（又称异步 action）。 redux-saga 通过创建 Sagas

「爱情、让人受尽委屈。」/ 2023年08月17日 16:30/ 0 赞/ 83 阅读

相关 <center>使用Redux-thunk中间件实现ajax数据请求center>

1.先安装redux-thunk依赖 npm install redux-thunk yarn add redux-thunk redux-th

àì夳堔傛蜴生んèń/ 2023年08月17日 16:03/ 0 赞/ 80 阅读

相关 <center>使用redux完成todoList的删除功能center>

1.没有把action单独拿出来的时候当大小写写错的时候很难找出错误而把action统一抽出来作为常量写入action-type中便于管理。 2.在store文件夹下

秒速五厘米/ 2023年08月17日 15:56/ 0 赞/ 67 阅读

相关 <center>使用antd+redux重写Todocenter>

1.在src目录下新建一个index.js文件文件内容如下： import React from 'react'; import ReactD

r囧r小猫/ 2023年08月17日 15:46/ 0 赞/ 16 阅读

相关 <center> javascript-适配器模式center>

将一个类(对象)的接口（方法或属性）转化成另一个接口，以满足用户需求，使类（对象）之间接口的不兼容性问题通过适配器方法得以解决适配器主要有3个角色组成：（1）客户端：

川长思鸟来/ 2021年11月17日 12:28/ 0 赞/ 412 阅读

相关 <center>原型链center>

原型链 JS的原型与原型链，相较于普通语法，它更难以理解一些，在开发上也较不常见。但这并不意为这它不重要，相反，它很重要。 ![在这里插入图片描述][watermar

比眉伴天荒/ 2021年10月23日 13:54/ 0 赞/ 515 阅读

相关 <center>使用git克隆指定分支的代码center>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

╰+攻爆jí腚メ/ 2021年10月23日 08:53/ 0 赞/ 242 阅读