#flowtype #redux-toolkit
#тип потока #redux-инструментарий
Вопрос:
Пытаюсь написать объявление для createSlice от redux toolkit. Возникли проблемы с созданием объявления, которое принимает объект, считывающий один из его собственных ключей, с помощью функции, которая возвращает один из ключей объектов.
Попробовали следующее, которое дает соответствующее возвращаемое значение
declare function createSlice<a = {|
name: string,
initialState: Object,
reducers: {[reducerName: string]: () => void}, // can not do $PropertwyType<a> here because flow says a is not defined
|}>(a: a): {
actions: $ObjMap<$PropertyType<a, 'reducers'>, Function>,
};
const slice = createSlice({
initialState: {} = {},
reducers: {
exists: (state) => {
state.test = 1 // no flow error
}
}
})
slice.exists() //`no error
slice.doesNotExists // flow error.
Приведенное выше значение правильно считывает действия, однако оно неправильно считывает объект состояния. Итак, я попробовал приведенный ниже подход, который правильно считывает состояние и показывает ошибку в редукторах, но теперь больше не читает действия должным образом
declare function createSlice<a = {|
name: string,
initialState: Object,
reducers: {[reducerName: string]: () => void},
|}>(b: a amp; {
reducers: {[reducerName: string]: ($PropertyType<a, 'initialState'>) => void}
}): {
actions: $ObjMap<$PropertyType<a, 'reducers'>, Function>,
};
const slice = createSlice({
initialState: {} = {},
reducers: {
exists: (state) => {
state.test = 1 // flow error. Yay
}
}
})
slice.exists() //`no error
slice.doesNotExists // no error
Ответ №1:
Я думаю, вы хотите что-то вроде этого:
type AnyAction = { ... };
declare function createSlice<
State,
SliceName: string,
Reducers: { [reducerName: string]: ((State, AnyAction) => void | State) },
>(
{|
name: SliceName,
initialState: State,
reducers: Reducers,
|}
): {|
name: SliceName,
reducer: (State, AnyAction) => State,
reducers: Reducers,
actions: $ObjMapi<Reducers, Function>,
|};
const slice = createSlice({
name: 'counter',
initialState: { member: 'initial' },
reducers: {
exists: (state) => {
state.member = 'test';
state.nothing = 'beans'; // error
},
}
});
slice.actions.exists();
slice.actions.somethingElse(); // error
Я не знаю, как вы собираетесь получить тип полезной нагрузки.
Комментарии:
1. Это в целом работает для ввода действий, даже если поток жалуется. Улучшения приветствуются! cutt.ly/0jAKaA4 Источник машинописного текста может представлять интерес: github.com/reduxjs/redux-toolkit/blob/next/src/createSlice.ts