@ironmansl

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

У меня есть рабочее 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;
  }
}

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

Как исправить эту ошибку?
  • Вопрос задан
  • 79 просмотров
Решения вопроса 1
@JorJeG
вероятно неправильно дефолтный объект в аргумент функции засунул
export function reducer(state = {    //добавил обьект в state
     day: 1,
      data: [],
      filteredData: [],
      search: "",
      shift: "departure"
    }, action)
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы