Почему когда перенес обьект в аргумент state reducer-a у меня такая ошибка в Redux приложении? Как исправить?

Question

[ironmansl]

У меня есть рабочее Redux приложение. И в нем есть несколько файлов но я напишу только 2 которые я изменил и главный компонент

версия моего 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")
);

версия моего редюсера до изменений

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

export function reducer(state = {}, action) {                   // state в который я помещу этот объект
  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;
  }
}

главный компонент

export function searchFilter(search, data) {
  return data.filter(n => n["planeTypeID.code"].toLowerCase().includes(search));
}

const days = ["12-11-2019", "13-11-2019", "14-11-2019"];

class Root extends React.Component {
  componentDidMount() {
    this.props.onFetchData(days[this.props.propReducer.day]);
  }

  render() {
    const { onFilter, onSetSearch, onFetchData } = this.props;
    const { search, shift, data, filteredData } = this.props.propReducer;

    return (
      <div>
        <div className="content">
        
        <Header/>
        <br/>
        <div className="searchTitle">SEARCH FLIGHT</div>
             <br/>
        <TableSearch value={search} onChange={e => onSetSearch(e.target.value)} 
         onSearch={value => onFilter({ search: value })}/>
             <br/>
             <br/>
        <div className="buttonShift">
          {data && Object.keys(data).map(n => (
            <button data-shift={n} onClick={e => onFilter({ shift: e.target.dataset.shift })} className={n === shift ? "active" : "noActive"}>
                {n}
            </button>
          ))}
        </div>
          
        <div className="row">
        <span className="title">Yesterday: </span><span className="title">Today: </span><span className="title">Tomorrow: </span>
        </div>

        <div className="buttonDays">
          {days && days.map((day, i) => (
            <button  key={day} onClick={() => onFetchData(day)} className="buttonDaysOne">
                {day} 
            </button>
          ))}
        </div>

        {data && <TableData data={filteredData} />}
          </div>
        <Footer/>
      </div>
    );
  }
}

export const ConnectedRoot = connect(
  state => state,
  dispatch => ({
    onFilter: args => dispatch({ type: "RUN_FILTER", ...args }),
    onSetSearch: search => dispatch({ type: "SET_SEARCH", search }),
    onFetchData: day => dispatch(fetchData(day))
  })
)(Root);

Но меня попросили кое-что изменить в моем коде. Мой обьект, который сейчас находится на месте второго аргумента метода createStore должен быть перемещен в state reducer.

Я попробовал переместить:

index.js:

const store = createStore(
  reducer,                                         // удалил обьект
  applyMiddleware(thunk)
);

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

reducer:

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

export function reducer(state = {propReducer: {    //добавил обьект в state
     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;
  }
}

И у меня появилась ошибка:


Как исправить эту ошибку?

Answer 1

[JorJeG]

вероятно неправильно дефолтный объект в аргумент функции засунул

export function reducer(state = {    //добавил обьект в state
     day: 1,
      data: [],
      filteredData: [],
      search: "",
      shift: "departure"
    }, action)

Comments

[ironmansl]

спасибо) работает) причем удивительно, что работает) учитывая то, что вы удалили свойство propReducer, которое используеться в главном компоненте)

вот здесь :

componentDidMount() {
    this.props.onFetchData(days[this.props.propReducer.day]);
  }

  render() {
    const { onFilter, onSetSearch, onFetchData } = this.props;
    const { search, shift, data, filteredData } = this.props.propReducer;

[JorJeG]

ironmansl,
Я основывался на том, что у тебя везде в функции reducer state.shift и state.search без использования propReducer.
Но наверное лучше всё-таки поменять как было и уже в функции reducer править на state.propReducer.shift, или поменять главный компонент

[ironmansl]

JorJeG,

поменять как было

Тоесть оставить обьект в createStore?
Так не разрешают так сделать как я сделал) сказали исправить таким образом) дословно сказали: дефолтный state описывать в reducer-e а не в createStore. Я так уже и написал в свой код как вы предложили в ответе, и буду так использовать, ведь так работает весь функционал, но просто нужно будет еще некоторые правки в коде делать, и нужно понять почему работает код если удалили propReducer) чтобы на последующие изменения это никак не повлияло)
Может тогда и это уже как-то тогда надо объединить если удалили propReducer?

const { onFilter, onSetSearch, onFetchData } = this.props;
    const { search, shift, data, filteredData } = this.props.propReducer;

вот так напрмер:

const { onFilter, onSetSearch, onFetchData,search, shift, data, filteredData } = this.props;

[JorJeG]

ironmansl, да, в главном компоненте без propReducer будет меньше исправлений, чем если править весь reducer

Скорее всего, когда они имели ввиду про дефолтный state в reducer-e, то имели ввиду,
что в месте, где мы делаем createStore, можно использовать и другой state, например, который из localStorage взят или что-нибудь ещё
а когда ничего не используем при createStore, то используется дефолтный из reducer-a