Тип 'TodosState' не является массивом type.ts (2461)

Question

Моя первая попытка использования TypeScript в проекте, и я застрял в правильном подборе типов между действиями и редукторами

Вот типы

types.ts

// Todo Type
export interface Todo {
  _id: string,
  content: string,
  completed?: boolean,
}

export interface TodosState {
  todos: Todo[]
}

// Read

export const TODOS_READ_KEY = 'TODOS_READ_KEY'
export const TODOS_READ_REQUEST_KEY = 'TODOS_READ_REQUEST_KEY'
interface TodosReadAction {
  type: typeof TODOS_READ_KEY
  payload: TodosState
}



// Add
export const TODO_ADD_KEY = 'TODO_ADD_KEY'
export const TODOS_ADD_REQUEST_KEY = 'TODOS_ADD_REQUEST_KEY'

interface AddTodoAction {
  type: typeof TODO_ADD_KEY
  payload: Todo
}




export type TodoActionTypes =  AddTodoAction | TodosReadAction

... и действия

actions.ts

import {
  Todo,
  TODO_ADD_KEY,
  TODOS_READ_REQUEST_KEY,
  TODOS_READ_KEY,
  TODOS_ADD_REQUEST_KEY
} from './types'
import { createRequestThunk } from '../action-helpers'
import { ICreateRequestThunk } from '../action-helpers-types'
import api from '../../api'
// import { red } from '../../logger'
import { orange } from '../../logger'

export function todoAdd(newTodo: Todo) {
  orange('todoAdd: todo', newTodo);

  return {
    type: TODO_ADD_KEY,
    payload: newTodo,
  }
}

export const todosRead = (todos: Todo[]) => {
  return ({
    type: TODOS_READ_KEY,
    payload: todos,
  })
}

// Read
const todoReadRequestCall: ICreateRequestThunk = {
  request: api.todos.read,
  key: TODOS_READ_REQUEST_KEY,
  success: [todosRead],
  failure: [(error) => console.log('(7) todoReadRequestCall: request failed', error)]
}

// Post
const todoAddRequestCall: ICreateRequestThunk = {
  request: api.todos.create,
  key: TODOS_ADD_REQUEST_KEY,
  success: [todoAdd],
  failure: [(error) => console.log('(7) todoAddRequestCall: request failed', error)]
}

export const todoAddRequest = createRequestThunk(todoAddRequestCall)

Проблема появляется ниже в redurs.ts. В строке todos: [...state, action.payload] 'состояние' подчеркнуто красным цветом, а в сообщении об ошибке указано

Type 'TodosState' is not an array type.ts(2461)

Если я изменю его на

todos: [...state.todos, action.payload]

красное подчеркивание исчезает, но затем я получаю ошибку во время выполнения

TypeError: "state.todos is undefined"
    Redux 2
    y (index):1
    h (index):1
    b (index):1
    dispatch Redux
    e (index):1
    Redux 4
        createThunkMiddleware
        dispatch
        createRequestThunk
        createRequestThunk

reducers.ts

import {
  TodosState,
  TODO_ADD_KEY,
  TodoActionTypes,
  TODOS_READ_KEY
} from './types'

const initialState: TodosState = {
  todos: []
}

export function todosReducer(
  state = initialState,
  action: TodoActionTypes
): TodosState {

  switch (action.type) {
    case TODOS_READ_KEY:
      return action.payload
    case TODO_ADD_KEY:
      return {
        todos: [...state, action.payload]
      }
    default:
      return state
  }
}

Answer 1

Возможно, попробуйте это в вашем редукторе:

return {
  ...state,
  todos: [...state.todos, action.payload]
}