Why after moving the object I have an Unhandled Rejection (TypeError) error: Cannot read property 'filter' of undefined in Redux app?

Question

I have redux app. In this app I have few files, but I will only write two that I have modified:

index.js:

const store = createStore(
  reducer, 
  {
    propReducer: {
      day: 1,
      data: [],
      filteredData: [],
      search: "",
      shift: "departure"
    }
  },
  applyMiddleware(thunk)
);

ReactDOM.render(
  <Provider store={store}>
    <ConnectedRoot />
  </Provider>,
  document.getElementById("root")
);

airplanes.js(reducer):

import { searchFilter } from "../containers/app";

export function reducer(state = {}, action) {
  switch (action.type) {
    case "SET_SHIFT":
      return Object.assign({}, state, {
        shift: action.shift
      });
    case "SET_SEARCH":
      return Object.assign({}, state, {
        search: action.search.toLowerCase()
      });
    case "RUN_FILTER":
      var newData = state.data[action.shift || state.shift].filter(x => {
        return (
          x["planeTypeID.code"].toLowerCase().includes(action.search || state.search)
        );
      });
      return Object.assign({}, state, {
        shift: action.shift || state.shift,
        search: action.search || state.search,
        filteredData: searchFilter(state.search, newData)
      });
    case "LOAD_DATA_START":
      return Object.assign({}, state, {
        day: action.day
      });
    case "LOAD_DATA_END":
      var newData = action.payload.data[state.shift].filter(x => {
        return (
          x["planeTypeID.code"] &&
          x["planeTypeID.code"].toLowerCase().includes(action.search || state.search)
        );
      });
      return Object.assign({}, state, {
        data: action.payload.data,
        shift: Object.keys(action.payload.data)[0],
        filteredData: searchFilter(state.search, newData)
      });
    default:
      return state;
  }
}

But one person told me to change something. My object, which is currently in index.js (action), the second argument of the createStore method needs to be moved to the state reducer.

I tried to do it:

index.js:

const store = createStore(
  reducer,                       // here I deleted
  applyMiddleware(thunk)
);

ReactDOM.render(
  <Provider store={store}>
    <ConnectedRoot />
  </Provider>,
  document.getElementById("root")
);

airplanes.js(reducer):

import { searchFilter } from "../containers/app";

export function reducer(state = {propReducer: {    //and here I put the object
      day: 1,
      data: [],
      filteredData: [],
      search: "",
      shift: "departure"
    }}, action) {
  switch (action.type) {
    case "SET_SHIFT":
      return Object.assign({}, state, {
        shift: action.shift
      });
    case "SET_SEARCH":
      return Object.assign({}, state, {
        search: action.search.toLowerCase()
      });
    case "RUN_FILTER":
      var newData = state.data[action.shift || state.shift].filter(x => {
        return (
          x["planeTypeID.code"].toLowerCase().includes(action.search || state.search)
        );
      });
      return Object.assign({}, state, {
        shift: action.shift || state.shift,
        search: action.search || state.search,
        filteredData: searchFilter(state.search, newData)
      });
    case "LOAD_DATA_START":
      return Object.assign({}, state, {
        day: action.day
      });
    case "LOAD_DATA_END":
      var newData = action.payload.data[state.shift].filter(x => {
        return (
          x["planeTypeID.code"] &&
          x["planeTypeID.code"].toLowerCase().includes(action.search || state.search)
        );
      });
      return Object.assign({}, state, {
        data: action.payload.data,
        shift: Object.keys(action.payload.data)[0],
        filteredData: searchFilter(state.search, newData)
      });
    default:
      return state;
  }
}

But I have error:

How to fix this error?

All project code in sandbox:

https://codesandbox.io/s/redux-ant-design-filter-table-column-with-slider-o149z

Answer 1

When it is in preloaded state it should be in this way

{
    propReducer: {
      day: 1,
      data: [],
      filteredData: [],
      search: "",
      shift: "departure"
    }
  }

If it is in same reducer then assign it as

state = {
      day: 1,
      data: [],
      filteredData: [],
      search: "",
      shift: "departure"
    }

By the way remove <Header /> and <Footer /> in app.js to run without cross origin error.. You are not importing those components anywhere in app.js

Coming to the error what you mentioned, if the object doesn't have the key then obviously it will return undefined..Applying a filter method on undefined variable gonna throw that error..

Simple way to debug your code is to use some console statements ex:-

console.log("shift",state.shift)
console.log("data",action.payload.data)
console.log("filteredData",action.payload.data[state.shift])