React redux -对象可能未定义

flvtvl50  于 2022-11-12  发布在  React
关注(0)|答案(2)|浏览(197)

我得到一个Typescript错误,我从Redux中使用的一个对象可能是未定义的,即使我没有说它的类型可以是未定义的,或者在任何地方将它设置为未定义的。

/redux/全局设置/操作.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/全局设置/还原器.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/全局设置/类型.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;

/还原/还原器.ts

import { combineReducers } from 'redux';
import globalSettings from './globalSettings/reducers';

const rootReducer = combineReducers({
  globalSettings,
});

export type StoreState = ReturnType<typeof rootReducer>;

export default rootReducer;

/还原文件/索引.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项目中使用了这个方法,方法是在导出_app.js页面时使用next-redux-wrapper NPM包(一个React HOC),如下所示:

export default withRedux(initialiseStore)(Page);

我在/redux/reducer.ts中得到一个错误:Type 'undefined' is not assignable to type 'GlobalSettings' .
如果我在我的一个页面上使用globalSettings redux状态,访问globalSettings.fields.navigationLinks会产生另一个Typescript错误,globalSettings可能未定义。
快把我逼疯了,我到底做错了什么?

efzxgjgh

efzxgjgh1#

错误
我在/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;
    }
}

可以在将状态设置为undefined(以初始化状态)的情况下调用Reducer。因此state参数应将undefined作为可能的值。

pxyaymoc

pxyaymoc2#

当我将extraReducers添加到一个预先存在的reducers dict(使用redux-toolkit)时,我遇到了类似的问题。
WritableDraft<WritableDraft<MySlice>>
及/或
Type 'undefined' is not assignable to type 'WritableDraft<MySlice>'
结果是我的一个reducers返回了undefined,而不是stateredux-toolkit使用immer,所以我猜它可能会工作,尽管return undefined)。
返回state修复了它。

相关问题