Redux 附加到数组 - Javascript

在Redux中，我们通常将数据存储在一个store中，每当我们需要更改存储的数据时，我们会调度 action 并 dispatch 它来更改store。

然而，在某些情况下，我们可能需要更改储存的数据，例如添加或删除数组中的一个元素。在这种情况下，我们可以使用redux的immer库。

添加元素到数组

要将元素添加到数组，请确保您安装了immer库。

1. 导入immer库

import produce from 'immer';

2. 定义你的初始状态和更新函数

const initialState = {
  items: []
}

const addItem = (state, itemToAdd) => {
  return produce(state, draftState => {
    draftState.items.push(itemToAdd);
  })
}

3. 创建reducer并导出

function reducer(state = initialState, action) {
  switch(action.type) {
    case 'ADD_ITEM':
      return addItem(state, action.payload)
    default:
      return state;
  }
}

export default reducer;

4. 在你的组件中dispatch action

import { useDispatch } from 'react-redux';
import { addItem } from './actions';

function MyComponent() {
  const dispatch = useDispatch();
  const handleClick = () => {
    dispatch(addItem('new item'));
  }

  return (
    <button onClick={handleClick}>Add Item</button>
  )
}

从数组中删除元素

删除元素时，我们需要查找元素并删除它。

1. 定义您的初始状态和更新函数

const initialState = {
  items: [{id: 1, text: 'Item 1'}, {id: 2, text: 'Item 2'}]
}

const removeItem = (state, itemToRemove) => {
  return produce(state, draftState => {
    const index = draftState.items.findIndex(item => item.id === itemToRemove.id);
    draftState.items.splice(index, 1)
  })
}

2. 创建reducer并导出

function reducer(state = initialState, action) {
  switch(action.type) {
    case 'REMOVE_ITEM':
      return removeItem(state, action.payload)
    default:
      return state;
  }
}

export default reducer;

3. 在你的组件中dispatch action

import { useDispatch, useSelector } from 'react-redux';
import { removeItem } from './actions';

function MyComponent() {
  const dispatch = useDispatch();
  const items = useSelector(state => state.items);

  const handleRemove = (item) => {
    dispatch(removeItem(item));
  }

  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>
          {item.text}
          <button onClick={() => handleRemove(item)}>Remove Item</button>
        </li>
      ))}
    </ul>
  )
}

以上是使用redux和immer库添加和删除数组元素的基本方法。将其与您的项目集成，以简化状态管理。