React redux - 对象可能是“未定义的”

Question

我收到一个 Typescript 错误，我在 Redux 中使用的对象可能未定义，即使我没有说它的类型可以未定义或在任何地方将其设置为未定义。/redux/globalSettings/actions.tsimport { 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.tsimport { 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.tsimport { 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.tsimport { combineReducers } from 'redux';import globalSettings from './globalSettings/reducers';const rootReducer = combineReducers({  globalSettings,});export type StoreState = ReturnType<typeof rootReducer>;export default rootReducer;/redux/index.tsimport { applyMiddleware, createStore } from 'redux';import { composeWithDevTools } from 'redux-devtools-extension/developmentOnly';import rootReducer, { StoreState } from './reducer';我通过在next-redux-wrapper我的_app.js页面导出时使用NPM 包（一个 React HOC）在我的 NextJS 项目中使用它，如下所示：export default withRedux(initialiseStore)(Page);我在/redux/reducer.ts得到一个错误：Type 'undefined' is not assignable to type 'GlobalSettings'。如果我globalSettings在我的一个页面上使用redux 状态，访问globalSettings.fields.navigationLinks会创建另一个globalSettings可能未定义的Typescript 错误。让我发疯，我在这里做错了什么？

Answer 1

错误

我在 /redux/reducer.ts 中收到一个错误：类型 'undefined' 不可分配给类型 'GlobalSettings'

与您如何定义减速器有关

它应该是

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尽可能的价值。