Javascript React.js、Redux、制作提醒应用程序

这是我的“提醒”应用程序

我的问题是：我想制作一个编辑按钮来编辑并更新项目。每个项目都有一个随机ID，用于指定其操作

流程如下：

“编辑”按钮与“删除”按钮一样动态显示

当按下“编辑”按钮时，应在屏幕上的某个位置创建一个输入，包括提醒的文本值和名为“更新文本”的新按钮

编辑值并单击“更新文本”按钮时，列表中的项目必须动态更改

我曾经在我的reducer中获取提醒列表，然后在每次按下按钮“X”时删除项目时，在列表上生成函数，然后.filter（），对于编辑函数LITY，我使用filter（），但这已经清除了列表，除了被舔的那一个！我尝试了.find（），但它返回的是一个对象而不是数组：所以我在App.jsx中遇到了问题，因为我映射了那个数组

我的App.jsx文件 我的reducers/index.js文件 我的src/index.js文件

从“React”导入React；
从“react dom”导入react dom//反应域
从“./components/App”导入应用程序；//这是你的应用程序
从“react redux”导入{Provider}；//供应商将在商店下方制作应用程序
从“redux”导入{createStore}；//商店是提供者的道具
从“./reducers”导入减速机；
导入“./index.css”；//注意我们是如何导入css文件的
//注意：当我们导入提供商并将我们的应用程序放入其中时，控制台将
//抛出一个错误，要求定义一个存储，存储道具属于提供者，所以我们需要createStore（）
//要创建存储，稍后我们将向该函数传递一个参数，该参数以
//操作，并返回新状态
//const store=createStore（）；//这条生产线是在没有减速器的情况下添加的
const store=createStore（reducer）；
ReactDOM.render(
/* 
存储所有数据并提供操作这些数据的方法的存储区。
存储是使用createStore（）函数创建的
*/
/*
提供程序组件，使任何组件都可以获取数据
从商店
*/
在减少字段的当前状态时，Redux有点棘手

删除列表中的项目的步骤：（omitBy来自）

要编辑列表中的项目，请执行以下操作：

case MODIFY_ITEM: {
  const itemIndex = list.findIndex(item => item.id === action.id);
  return {
    ...state,
    [itemIndex]: { 
      ...state[itemIndex], 
      ...action.newItem // newItem is an object containing the properties you want to modify
    }
  }
}

当列表中充满id时，使用函数生成循环（如findIndex或omit）有点令人难过。您可以通过使用（您也可以在香草ES6中这样做）进一步改进此代码，甚至可以将数组转换为id键控的映射，然后能够访问您的项，如下所示：
mapOfItems[itemId]

当状态为映射时，编辑案例如下所示：

case MODIFY_ITEM: {
  return {
    ...state,
    [action.id]: { 
      ...state[action.id], 
      ...action.newItem,
    }
  }
}

删除操作将非常简单，如
omit（state，action.id）
嘿，欢迎来到stack overflow！查看本页，特别是，关注您真正需要多少代码来向我们展示这个问题。我发现尝试构建一个非常非常非常小的项目来展示这个问题是很有帮助的。这不仅对试图回答您问题的人更有帮助，而且您可能会在整个过程中解决它太好了！祝你好运！听起来你是在向后过滤。@BlakeSteel我很感激你的建议，但请原谅我是初学者，我向你保证，我会在未来的问题中做得更好使用“香草”时，你的减速机会为
DELETE\u项
操作改变状态 version@Eld0w，我很感激你的回答，但请仔细看看我的代码，并尝试给出一些使用它的东西，我尝试在不使用任何其他库的情况下创建它。我只需要React，redux就可以了。通常有一种方法，一旦你的状态被规范化，你就可以手动完成，就像我在KeyBy中提到的，甚至可以重新创建duce或使用诸如normalizer之类的库。这篇文章解释了很多关于状态规范化的内容：-我的前两个代码示例应该可以工作，而且它们不依赖任何库，但我建议花点时间使用规范化的redux状态。@Nimelrian:我编辑了我的答案，没有改变状态
// Welcome to reducers/index.js file
// First, as we saw in actions/index.js, we need to import the type from constants file 
import { ADD_REMINDER/*, ADD_FAVORITE*/ , DELETE_REMINDER , MODIFY_REMINDER , CLEAR_REMINDERS} from '../constants';

import { bake_cookie, read_cookie } from 'sfcookies' // cookies are used to save some data locally

/**
* Step 2 define a helper reminder() function which takes 1 arg ( action ) 
*/
const reminder = action => {

    let { text,dueDate } = action;
    // we return an object as a reminder, with a text and a random ID ( for example )
    return {
        id: Math.random(), // check Math JS class on google for better information
        text: text,
        dueDate: dueDate,
    }
}

/** Step 3 removeById function
* we'll have an arrow function that will have 2 args: 
* 1 - state = [] -> the list of our reminders
* 2 - id -> the id of the concerned item to delete
* the function is going to filter the list
* then only returns the IDs that are not equal to the clicked list item id
*/
const removeById = (state = [], id) => {

    const reminders = state.filter( reminder => reminder.id !== id)

    // this will show the filtered list
    console.log ('new reduced reminders', reminders)

    return reminders
}

const modifyById = (state = [], id) => {

    const reminders = state.find( (reminder) => reminder.id === id )

    console.log ('new reduced reminders', reminders)

    return reminders
}

/** Step 1 Reducer creation: it will be an ANONYMOUS ARROW function,
 * it has 2 parameters: 
 * ( state[] - preinitialized to an empty array -  , - and a second arg which is - action ) 
 * -> (state[],action)
 */
 const reminders = (state = [], action) => { // it can be written as state = [] without if parentheses if there is only arg

    // We initialize a variable here within our reminders reducer to null 
    let reminders = null;

    state = read_cookie('reminders')

    // Generally we can expect more than one type of action entered here in the future, 
    // besides addReminder() (the action creator)
    // so let's use a switch statement
    switch(action.type) {

        // we consider our first case as our ADD_REMINDER defined in constants.js file
        case ADD_REMINDER: 

            // -> in this case we set our reminders to an array 
            // -> Here we are using a NEAT ES6 trick
            // Our first element will be a spread object ( like varargs in Java ) which was our state array
            // Our second element will be a reminder() that will take an action parameter, check Step 2
            reminders = [...state, reminder(action)];

            // Log the reminder as state through the reducer into the console, this will show if our reducer is connected 
            // to the application or not
            //console.log('reminders as state', reminders);

            // save cookie to our browser
            bake_cookie('reminders', reminders)

            // we return the reminders tht we've gotten 
            return reminders;

        // we consider our second case as our DELETE_REMINDER defined in constants.js file
        case DELETE_REMINDER:
            // in this, we move to declare our removeId function first 
            reminders = removeById(state, action.id)
            bake_cookie('reminders', reminders)
            return reminders

        case MODIFY_REMINDER:
            reminders = modifyById(state, action.id)
            return reminders

        case CLEAR_REMINDERS:
            reminders = []
            bake_cookie('reminders', reminders)
            return reminders;

        // otherwise, if we got other types than "ADD_REMINDER"
        default:
            return state;   
    }
}

export default reminders;

import React from 'react';
import ReactDOM from 'react-dom'; //ReactDOm 
import App from './components/App'; // this is ur App
import { Provider } from 'react-redux';// Provider will make the applicaton under the store
import { createStore } from 'redux'; // a store is a Provider prop
import reducer from './reducers';
import './index.css'; // notice how we import css file

// NOTE: When we import the Provider and place our App into it, the console will 
// throw an error asking to define a store, a store prop belongs to Provider, so we need to createStore() 
// to create the store, and later we'll pass a param to this function, that takes states in an
// an action, and return new state
//const store = createStore(); // this line was added without reducers at the beginning
const store = createStore(reducer);

ReactDOM.render(
    /* 
      A store that stores all the data and provides methods to manipulate this data.
      The store is created with the createStore() function
    */
    /*
      A Provider component that makes it possible for any components to take data
      from the store
    */
    <Provider store={store}> 
        <App />
    </Provider>,
    document.getElementById('root')
    );

case DELETE_ITEM: {
  return omitBy(state, item => item.id === action.id);
  // OR in vanilla 
  const itemIndex = list.findIndex(item => item.id === action.id);
  const newState = [...state];
  newState.splice(itemIndex, 1)
  return newState;
}

case MODIFY_ITEM: {
  const itemIndex = list.findIndex(item => item.id === action.id);
  return {
    ...state,
    [itemIndex]: { 
      ...state[itemIndex], 
      ...action.newItem // newItem is an object containing the properties you want to modify
    }
  }
}

case MODIFY_ITEM: {
  return {
    ...state,
    [action.id]: { 
      ...state[action.id], 
      ...action.newItem,
    }
  }
}