开发者问题收集

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

2019-06-24
2884

我收到一个 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 可能未定义。

让我抓狂,我在这里做错了什么?

2个回答

错误

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 作为可能值。

Fyodor Yemelyanenko
2019-06-25

当我将 extraReducers 添加到预先存在的 reducers 字典(使用 redux-toolkit )时,遇到了类似的问题。我之前所有的 reducers 都出现了 TypeScript 错误,包括

WritableDraft<WritableDraft<MySlice>>

和/或

类型“undefined”无法分配给类型“WritableDraft<MySlice>”

事实证明,我的一个 reducers 返回的是 undefined 而不是 stateredux-toolkit 使用 immer ,所以我想尽管 return undefined ,它也可能有效)。

返回 state 可以修复该问题。

Jeremy Smith
2022-08-23