ReactJS Redux：未捕获的类型错误：无法读取未定义的属性（读取“类型”）

Question

Inside MainComponent class on DidMount I am running the following:

  getResultsSearchURL = () => {
    if (this.props.tokenized && this.props.match.params.searchQuery) {
      console.log("tokenized");

      this.props.dispatch(
        getResult({
          key: this.props.match.params.searchQuery,
        })
      );
    }
  };

  componentDidMount() {
    console.log("mounted");
    this.getResultsSearchURL();
  }

And in Redux currently just logging to console:

export const getResult = (item) => console.log({ item });

What is causing these errors? Am I doing something wrong here?

---

Getting the following errors:

Uncaught TypeError: Cannot read properties of undefined (reading 'type')
    at reducer (createReducer.ts:233)
    at reducer (createSlice.ts:325)
    at MainContainer.getResultsSearchURL (MainContainer.jsx:43)
    at MainContainer.componentDidMount (MainContainer.jsx:53)
    at commitLifeCycles (react-dom.development.js:20663)
    at commitLayoutEffects (react-dom.development.js:23426)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at commitRootImpl (react-dom.development.js:23151)

react-dom.development.js:20085 The above error occurred in the <MainContainer> component:

    at MainContainer (http://localhost:3000/static/js/bundle.js:7157:5)
    at ConnectFunction (http://localhost:3000/static/js/bundle.js:54017:68)
    at Route (http://localhost:3000/static/js/bundle.js:57231:29)
    at Switch (http://localhost:3000/static/js/bundle.js:57433:29)
    at Portal (http://localhost:3000/static/js/bundle.js:7523:5)
    at ConnectFunction (http://localhost:3000/static/js/bundle.js:54017:68)
    at Router (http://localhost:3000/static/js/bundle.js:56862:30)
    at BrowserRouter (http://localhost:3000/static/js/bundle.js:56484:35)
    at Fe (http://localhost:3000/static/js/bundle.js:63987:60)
    at ye (http://localhost:3000/static/js/bundle.js:63821:61)
    at Provider (http://localhost:3000/static/js/bundle.js:53729:20)
    at Partner

createReducer.ts:233 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'type')
    at reducer (createReducer.ts:233)
    at reducer (createSlice.ts:325)
    at MainContainer.getResultsSearchURL (MainContainer.jsx:43)
    at MainContainer.componentDidMount (MainContainer.jsx:53)
    at commitLifeCycles (react-dom.development.js:20663)
    at commitLayoutEffects (react-dom.development.js:23426)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at commitRootImpl (react-dom.development.js:23151)

---

Reducer store:

const reducer = combineReducers({
  authenticator,
  alert,
  search,
  body,
});
const store = configureStore({
  reducer,
  middleware: [...getDefaultMiddleware(), api],
});

export default store;

Slice:

const slice = createSlice({
  name: "u/Body",
  initialState: {
    loading: false,
    search: {
      list: [],
      listFiltered: [],
      availableStock: false,
      supplierStock: {
        code: [],
        list: [],
        loading: false,
        updated: true,
      },
    },
  },
  reducers: {
    searchStarted: (body, action) => {
      body.loading = true;
      body.search.listFiltered = [];
      body.search.supplierStock.code = [];
      body.search.supplierStock.list = [];
      const filterKeys = Object.keys(body.search.filter);
      filterKeys.forEach((k) => {
        body.search.filter[k].list = [];
      });
    },
    searchRecieved: (body, action) => {
      body.search.list = action.data.l;
      body.search.supplierStock.code = action.data.c;
      body.loading = false;
      const filterKeys = Object.keys(body.search.filter);
      //...
    },
   //...
  },
});


export const { filterUpdated } = slice.actions;
export default slice.reducer;

export const getResult = (item) =>
  partnerApiStart({
    url: "/search/result",
    method: "post",
    authenthicateRequired: true,
    onStart: slice.actions.searchStarted.type,
    onSuccess: slice.actions.searchRecieved.type,
    //onError: slice.actions.searchFailed.type,
    data: { k: item.key },
  });

API Middleware:

export const partnerApiStart = createAction("UNI/API/started");

const api = (store) => (next) => async (action) => {
  console.log(action);

  if (action.type !== partnerApiStart.type) {
    return next(action);
  }
  next(action);
//...

Answer 1

I think (at least one of) the problem is that partnerApiStart is an action creator, which is a function, not an action. So partnerApiStart.type should be undefined in here action.type.== partnerApiStart.type . I suspect this is related to the error you are seeing but doesn't directly explain the null pointer.

Reference: documentation for createAction https://redux-toolkit.js.org/api/createAction