Типизированная отправка с React-Redux

После официального туториала не очень понимаю, как правильно отправить обновление с [email protected].

Моя установка выглядит так:

export const mySlice = createSlice({
  name: 'MyItem',
  initialState: { field1: 'hello, world', field2: 0 },
  reducers: {
    setField: (state: { field1: string; field2: number }, action: PayloadAction<string>) => {
      state.field1 = action.payload;
    },
  },
});

export const store = configureStore({
  reducer: {
    myItem: mySlice.reducer,
  },
});

export type AppDispatch = typeof store.dispatch;

Внутри компонента я борюсь с отправкой:

const dispatch: AppDispatch = useDispatch();

// Resembles the `dispatch(increment())}` from the offical example, but I get a type error and I can't pass my update data.
// Additionally, the signature looks wrong (it looks like a reducer)
dispatch(mySlice.actions.setField());
// Since the signature doesn't match, TypeScript complains with `Void function return value is used`
dispatch(mySlice.actions.setField('newValue')) 
// TypeScript won't complain, but it doesn't seem like I could pass my update this way
dispatch(mySlice.actions.setField);
// TypeScript won't complain, but it's neither typed nor the recommended approach anyway
dispatch({ type: 'Idontexist', someValue: "hey" });

Спасибо за вашу помощь!

Редактировать: Решение, по-видимому, заключается в использовании шаблона деконструкции:

export const {setField} = mySlice.actions;
...
dispatch(setField('newValue'))

Но я понятия не имею, почему это работает, а прямой доступ к dispatch(mySlice.actions.setField('newValue')) не работает.

Не могли бы вы перепроверить импорт mySlice? Он должен импортировать объект, созданный createSlice, но вы не экспортируете его в своем примере.

Evgeny K 23.11.2022 18:07

@Evgeny Вы правы, я исправил экспорт. По правде говоря, весь код в любом случае находится в одном файле (поскольку это просто быстрый и грязный пример). ;)

NotX 23.11.2022 18:33
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
2
52
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Экспортируйте правильно

export const {setField} = mySlice.actions;

теперь вы можете импортировать его и отправить (setField())

Это сделало трюк! Можете ли вы объяснить, почему деструктуризация {setField} отличается от прямого доступа к свойствам mySlice.actions.setField?

NotX 23.11.2022 18:22

Другие вопросы по теме