React redux - 对象可能“未定义”
我收到一个 Typescript 错误,提示我从 Redux 中使用的对象可能未定义,即使我没有说它的类型可以是未定义的,或者在任何地方将其设置为未定义的。
/redux/globalSettings/actions.ts
import { ADD_GLOBAL_SETTINGS } from '../../config/actions';
import { AddGlobalSettingsAction } from './types';
import GlobalSettings from '../../typings/contentful/GlobalSettings';
export const addGlobalSettings = (payload: GlobalSettings): AddGlobalSettingsAction => ({
type: ADD_GLOBAL_SETTINGS,
payload,
});
/redux/globalSettings/reducers.ts
import { ADD_GLOBAL_SETTINGS } from '../../config/actions';
import { GlobalSettingsAction, GlobalSettingsState } from './types';
export default (
state: GlobalSettingsState,
action: GlobalSettingsAction,
): GlobalSettingsState => {
switch (action.type) {
case ADD_GLOBAL_SETTINGS:
return { ...action.payload };
default:
return state;
}
}
/redux/globalSettings/types.ts
import { ADD_GLOBAL_SETTINGS } from '../../config/actions';
import GlobalSettings from '../../typings/contentful/GlobalSettings';
export type GlobalSettingsState = GlobalSettings;
export interface AddGlobalSettingsAction {
payload: GlobalSettings;
type: typeof ADD_GLOBAL_SETTINGS;
}
export type GlobalSettingsAction = AddGlobalSettingsAction;
/redux/reducer.ts
import { combineReducers } from 'redux';
import globalSettings from './globalSettings/reducers';
const rootReducer = combineReducers({
globalSettings,
});
export type StoreState = ReturnType<typeof rootReducer>;
export default rootReducer;
/redux/index.ts
import { applyMiddleware, createStore } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension/developmentOnly';
import rootReducer, { StoreState } from './reducer';
export const initialiseStore = (
initialState: StoreState,
) => createStore(
rootReducer,
initialState,
composeWithDevTools(applyMiddleware()),
);
我在我的 NextJS 项目中使用它
next-redux-wrapper
NPM 包(React HOC)在我的
_app.js
页面的导出中,如下所示:
export default withRedux(initialiseStore)(Page);
我在 /redux/reducer.ts 中收到错误:
类型“undefined”无法分配给类型“GlobalSettings”
。
如果我在其中一个页面上使用
globalSettings
redux 状态,访问
globalSettings.fields.navigationLinks
会产生另一个 Typescript 错误,即
globalSettings
可能未定义。
让我抓狂,我在这里做错了什么?
错误
I get an error in /redux/reducer.ts of: Type 'undefined' is not assignable to type 'GlobalSettings'
与您定义 Reducer 的方式有关
应该是
const initalState: GlobalSettingsState = {/* valid inital state */};
export default (
state: GlobalSettingsState | undefined = initalState,
action: GlobalSettingsAction,
): GlobalSettingsState => {
switch (action.type) {
case ADD_GLOBAL_SETTINGS:
return { ...action.payload };
default:
return state;
}
}
可以将状态设置为未定义(以初始化状态)来调用 Reducer。因此
state
参数应该具有
undefined
作为可能值。
当我将
extraReducers
添加到预先存在的
reducers
字典(使用
redux-toolkit
)时,遇到了类似的问题。我之前所有的
reducers
都出现了 TypeScript 错误,包括
WritableDraft<WritableDraft<MySlice>>
和/或
类型“undefined”无法分配给类型“WritableDraft<MySlice>”
事实证明,我的一个
reducers
返回的是 undefined 而不是
state
(
redux-toolkit
使用
immer
,所以我想尽管
return undefined
,它也可能有效)。
返回
state
可以修复该问题。