После официального туториала не очень понимаю, как правильно отправить обновление с [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'))
не работает.
@Evgeny Вы правы, я исправил экспорт. По правде говоря, весь код в любом случае находится в одном файле (поскольку это просто быстрый и грязный пример). ;)
Экспортируйте правильно
export const {setField} = mySlice.actions;
теперь вы можете импортировать его и отправить (setField())
Это сделало трюк! Можете ли вы объяснить, почему деструктуризация {setField}
отличается от прямого доступа к свойствам mySlice.actions.setField
?
Не могли бы вы перепроверить импорт
mySlice
? Он должен импортировать объект, созданныйcreateSlice
, но вы не экспортируете его в своем примере.