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

秒速五厘米 2023-08-17 15:56 145阅读 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 条评论，145人围观）

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

相关阅读

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

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

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

相关 <center>React实现简易TodoListcenter>

class TodoList extends Component { /render函数返回的JSX模板最外层只能由一个包裹元素使用Fragment做占位

悠悠/ 2023年10月09日 12:31/ 0 赞/ 15 阅读

相关 <center>Redux框架之combineReducers()center>

combineReducers() 随着应用变得复杂，需要对 reducer 函数进行拆分，拆分后的每一块独立负责管理 state 的一部分。 combineReduce

红太狼/ 2023年10月09日 09:36/ 0 赞/ 53 阅读

相关 <center>redux+react-reduxcenter>

本文主要记录下自己在react道路上的爬坑过程以及对于刚学习redux的同学提供一些可供参考的例子。要知道redux和react并没有半毛钱的关系，redux甚至可以和j

墨蓝/ 2023年10月09日 09:35/ 0 赞/ 22 阅读

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

相关 <center>原型链center>

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

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