如何使用 Typescript 不可变地更新 Redux state 数组

Question

我正在尝试通过做一些像 Todo-List 应用程序这样简单的事情来学习 Typescript。 问题是我无法在我创建的切片中更新 Redux state 数组。（或者更像是我不知道该怎么做）

这是我的主要组件Todolist.tsx ：

import React, { FC, ChangeEvent, FormEvent, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { update } from '../todoSlice';
import { RootState } from '../todoStore';

const TodoList: FC = () => {

    // React state array for the todos
    const [todos, setTodos] = useState<string[]>([]);
    // Get the input from this state
    const [input, changeInput] = useState<string>('');

    const dispatch = useDispatch()
    // Selecting the state of the todoSlice component
    const selector = useSelector((state: RootState) => { return state.todoCard })

    const handleChange = (event: ChangeEvent<HTMLInputElement>): void => {
        event.preventDefault();
        changeInput(event.target.value);
    }
    
    const addTodos = (event: FormEvent<HTMLFormElement>): void => {
        event.preventDefault();
        setTodos([...todos, input]);
        dispatch(update(todos));
        console.log("REACT: ", todos);
        console.log("REDUX: ", selector);
    }

    const removeTodos = (index: number): void => {
        let filteredArray = todos.filter((todo, todoIndex) => (
            todoIndex !== index
        ))
        setTodos(filteredArray);
    }

    return (
    <React.Fragment>
    <div className='bg-light d-inline-block text-center mt-4' style={{ padding: '10vh', marginLeft: '4vw' }}>
      <h1 className='mb-4'>Todo List</h1>
      <section className='text-wrap mb-4' style={{ overflowY: 'auto', height: '10rem' }}>
        {
          // Mapping thee todo-list items
          todos.map((todo, index) => (
            <React.Fragment key={index}>
              <div className='d-flex justify-content-between mb-3'>
                <li className='d-block'>{todo}</li>
                <button onClick={() => {removeTodos(index)}}>X</button>
              </div>
            </React.Fragment>
          ))
        }
      </section>
      <form onSubmit={addTodos}>
        <input type='text' name="input" className='p-1 rounded border-success' onChange={handleChange}></input>
        <button type="submit" className='ms-3 btn btn-success mb-1'>Enter</button>
      </form>
    </div>
    </React.Fragment>
    )
}

export default TodoList

这是我的切片组件todoSlice.ts ：

import { createSlice } from '@reduxjs/toolkit'

export const todoSlice = createSlice({
    name: 'todo',
    initialState: {
        todoCard: [],
    },
    reducers: {
        update: (state, action) => {
            return {
                // Return a copy of the array and SHOULD update the state array here "immutably"
                ...state,
                todoCard: [
                    ...state.todoCard,
                    action.payload
                ]
            }
        }
    }
})

export const { update } = todoSlice.actions

export default todoSlice.reducer

我从谷歌尝试了很多不同的方法，但他们的方法似乎都无法解决我的问题。 感谢您提前回复：:)

编辑：我忘了添加显示的错误，所以在这里

Answer 1

export const todoSlice = createSlice({
    name: 'todo',
    initialState: {
        todoCard: [],
    },
    reducers: { // <------- "Map Object" Notation
        update: (state, action) => {

通过这样做，您将使用https://redux-toolkit.js.org/api/createReducer和“Map Object”表示法。 这就是 redux-toolkit 文档所说的：

虽然这个符号有点短，但它只适用于 JavaScript，而不适用于 TypeScript 并且与 IDE 的集成较少，因此我们在大多数情况下建议使用“构建器回调”符号。

所以我建议用https://redux-toolkit.js.org/api/createReducer#usage-with-the-builder-callback-notation重写它 - 你也不需要担心可变性。

看起来还可能缺少某些类型注释。 如果state.todoCard是一个字符串数组，它应该被这样注释。 redux-toolkit 文档中有很多示例以获得更好的 TS 支持。 例如，查看https://redux-toolkit.js.org/tutorials/typescript 。 除其他外，有一个版本的useSelector已经知道你的 redux state 是如何输入的，这很有帮助。

Answer 2

你需要打字，你的动作是类型PayloadAction<string[]> ，试试这个

reducers: {
    update: (state, action: PayloadAction<string[]>) => { 
      ...

你也应该给你的 initialState 一个类型

interface InitialState {
  todoCard: string[];  
}       

const init: InitialState  =  {
  todoCard: [],
}

export const todoSlice = createSlice({
  name: 'todo',
  initialState: init,