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

Question

我会遇到一个打字稿错误，即我从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软件包(A React Hoc(在我的_app.js页面的导出中使用此信息：

export default withRedux(initialiseStore)(Page);

我在： Type 'undefined' is not assignable to type 'GlobalSettings'。

如果我在我的一个页面上使用globalSettings redux状态，则访问globalSettings.fields.navigationLinks会造成另一个打字稿错误，即globalSettings可能不确定。

让我发疯，我在这里做错了什么？

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;
    }
}

还可以用状态设置为未定义(初始化状态(来调用减速器。因此state参数应具有undefined作为可能的值。

Answer 2

我在将extraReducers添加到预先存在的reducers dict(使用redux-toolkit(中时遇到了与此类似的问题。我所有的reducers先前罚款都有

的打字稿错误

WritableDraft<WritableDraft<MySlice>>

和/或

Type 'undefined' is not assignable to type 'WritableDraft<MySlice>'

事实证明，我的reducers之一是返回未定义的而不是state(redux-toolkit使用immer，所以我想尽管return undefined，我可能会起作用(。

返回state修复了它。