Как использовать «мутации» Redux Tool Kit с TypeScript: «Свойство pu sh» не существует для типа » - PullRequest
0 голосов
/ 02 апреля 2020

WebStorm debug image

Я работаю с Redux Tool Kit в проекте TypeScript. Одна из вещей, которую позволяет набор инструментов, - это использование мутаций внутри редукторов , хотя никто не изменяет состояние напрямую - когда он использует их вызов createReducer:

const todosReducer = createReducer([], {
  ADD_TODO: (state, action) => {
    // "mutate" the array by calling push()
    state.push(action.payload)
  },
  TOGGLE_TODO: (state, action) => {
    const todo = state[action.payload.index]
    // "mutate" the object by overwriting a field
    todo.completed = !todo.completed
  },
  REMOVE_TODO: (state, action) => {
    // Can still return an immutably-updated value if we want to
    return state.filter((todo, i) => i !== action.payload.index)
  }
})

I Вы определили мое состояние так:

type InitialArticlesState = {
    articles: Articles[];
    currentArticle: Article | undefined;
    tags: TagList;
    currentTags: TagList;
    currentArticleNumber: number;
    totalArticlesNumber: number;
    currentSearchString: string;
    error: string;
};

const initialState: InitialArticlesState = {
    articles: [],
    currentArticle: undefined,
    tags: [],
    currentTags: [],
    currentArticleNumber: 0,
    totalArticlesNumber: 0,
    currentSearchString: '',
    error: ''
};

Теперь TypeScript жалуется на state.push здесь:

[articlesReceived.type]: (state, action: PayloadAction<Articles[]>) => {
        state.push(action.payload);
    },

, говоря

enter image description here

Каков наилучший способ решить эту проблему? Я относительный новичок TS ie, поэтому мне не ясно, с чего начать.

Edit

Казалось бы, когда приложение прибывает в редуктор, состояние является прокси для чего-то другого. Поэтому я не уверен, что типы имеют смысл в этом контексте - то, что определено в коде, не то, что приходит во время выполнения ... или есть способ сделать это?

1 Ответ

1 голос
/ 02 апреля 2020

Похоже, здесь есть несколько разных проблем.

Во-первых, ваша функция редуктора не соответствует типу состояния, который вы определили для кода. Ваше значение initialState является объектом, а не массивом. Но ваш код действует как state как массив, вызывая state.push(), поэтому TypeScript выдает ошибку, сообщающую, что это невозможно.

Во-вторых, ваш payload напечатан как Article[], но вы куда-то звоните .push(). Вы действительно хотите назначить этот массив в состояние и перезаписать любые существующие статьи? Если да, то, что вы на самом деле хотите:

state.articles = action.payload;

В-третьих, вызвав createReducer и передав объект-редуктор, вам будет сложнее попытаться правильно ввести состояние и действие. , В соответствии с нашим использованием со страницей документов TypeScript , вы должны использовать форму "обратного вызова построителя" createReducer, чтобы улучшить поведение при наборе:

createReducer(initialState, builder => {
    builder.addCase(typedActionCreator, (state, action) => {
        // state and action are both correctly inferred here
    });

})

И, наконец, Большую часть времени вам все равно не следует звонить createReducer вручную. Мы рекомендуем использовать createSlice для большинства ваших логи c, что автоматически сгенерирует создателей действий для вас.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...