Что я не так переделал в mapStateToProps и в методе render что у меня появились ошибки? И что исправить?

Question

[antonstolar]

Есть код одного Redux-React приложения который может помочь мне написать мой новый собственный проект, но я там встретился с такой записью:

const mapStateToProps = state => state;
Я раньше не писал таким образом, кроме того попросили переделать и сделать как-то так(пример с совсем другого кода):

const mapStateToProps = state => ({
    onLike: state.propReducer.like
});

И я переделал mapStateToProps и то что по моему мнению нужно было переделать в методе render(я новичок в Redux), но у меня появились ошибки и приложение перестало работать:

./src/containers/app.js
Line 47:29: 'stateToPropsSearchInput' is not defined no-undef
Line 52:12: 'stateToPropsStartDataArray' is not defined no-undef
Line 52:54: 'stateToPropsStartDataArray' is not defined no-undef
Line 53:169: 'stateToPropsCategory' is not defined no-undef
Line 65:95: 'stateToPropsDay' is not defined no-undef
Line 71:10: 'stateToPropsStartDataArray' is not defined no-undef
Line 71:66: 'stateToPropsFilteredDataArray' is not defined no-undef

Я напишу в спойлере рабочий вариант части файла App.js до изменений и не рабочий после изменений. Пусть вас не пугает большой код, больше кода написал для информативности, по сути я изменил только тело метода mapStateToProps, и в методе render во всех местах изменил названия свойств стейта (из редюсера) на свойства которые придумал в методе mapStateToProps, тоесть stateToPropsSearchInput и т.д. . Помогите пожалуйста исправить mapStateToProps и подскажите что исправить в теле метода render.

Рабочий вариант до измениний

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

  render() {
    const { onFilter, onSetSearch, onFetchData } = this.props;
    const { day, startDataArray, filteredDataArray, searchInput, category} = this.props.propsReducer;

    return (
      <div>
        
        <TableSearch value={searchInput} onChange={e => onSetSearch(e.target.value)} 
         onSearch={value => onFilter({ searchInput: value })}/>
        
          {startDataArray && Object.keys(startDataArray).map(element => (
            <button data-category={element} onClick={e => onFilter({ category: e.target.dataset.category })} className={element === category ? "active" : "noActive"}>
                {element}
            </button>
          ))}
          
        
          {daysArray && daysArray.map((element, index) => (
            <button key={element} onClick={() => onFetchData(element)} className={element === day ? "activeDay" : "noActiveDay"}>
                {element} 
            </button>
          ))}

        {startDataArray && <TableData dataAttribute={filteredDataArray} />}

          </div>
    );
  }
}

const mapStateToProps = state => state;

const matchDispatchToProps = dispatch => ({
    onFilter: args => dispatch(filter(args)),
    onSetSearch: search => dispatch(setSearch(search)),
    onFetchData: day => dispatch(fetchData(day))
});

Не рабочий вариант после изменений

class Root extends React.Component {
  componentDidMount() {
    this.props.onFetchData(daysArray[this.props.propsReducer.stateToPropsDay]);
  }

  render() {
    const { onFilter, onSetSearch, onFetchData } = this.props;
    const { day, startDataArray, filteredDataArray, searchInput, category} = this.props.propsReducer;
    return (
      <div>
        
        
        <TableSearch value={stateToPropsSearchInput} onChange={e => onSetSearch(e.target.value)} 
         onSearch={value => onFilter({ stateToPropsSearchInput: value })}/>
          {stateToPropsStartDataArray && Object.keys(stateToPropsStartDataArray).map(element => (
            <button data-stateToPropsCategory={element} onClick={e => onFilter({ stateToPropsCategory: e.target.dataset.stateToPropsCategory })} className={element === stateToPropsCategory ? "active" : "noActive"}>
                {element}
            </button>
          ))}
          
        

          {daysArray && daysArray.map((element, index) => (
            <button key={element} onClick={() => onFetchData(element)} className={element === stateToPropsDay ? "activeDay" : "noActiveDay"}>
                {element} 
            </button>
          ))}

        {stateToPropsStartDataArray && <TableData dataAttribute={stateToPropsFilteredDataArray} />}
      </div>
    );
  }
}

const mapStateToProps = state => ({
    stateToPropsDay: state.propReducer.day,
    stateToPropsStartDataArray: state.propReducer.startDataArray,
    stateToPropsFilteredDataArray: state.propReducer.filteredDataArray,
    stateToPropsSearchInput: state.propReducer.searchInput,
    stateToPropsCategory: state.propReducer.category
});


const matchDispatchToProps = dispatch => ({
    onFilter: args => dispatch(filter(args)),
    onSetSearch: search => dispatch(setSearch(search)),
    onFetchData: day => dispatch(fetchData(day))
});

в reducer я стейт передал такой:

state = {    
     day: 1,
      startDataArray: [],
      filteredDataArray: [],
      searchInput: "",
      category: "departure"
    }

а файл combineReducers выглядит так:

const rootReducer = combineReducers({
  propsReducer: reducer
});

Answer 1

[oduho4ka]

Вам надо добавить строку

const {stateToPropsDay, stateToPropsStartDataArray, stateToPropsFilteredDataArray,     stateToPropsSearchInput, stateToPropsCategory} = this.props;

перед return в методе render

Comments

[antonstolar]

я то исправил но не в том дело

[oduho4ka]

Пожалуйста, посмотрите внимательнее на то, что я вам написал, и то, что вы исправили.
Возьмем на примере day.
Вы пишите const {day, ...} = this.props;, но в mapStateToProps вы значение этого поля из редакса передаете вашему компоненту под именем stateToPropsDay. Значит вам надо писать const {stateToPropsDay, ...} = this.props;
С отсальными пропсами так же.

[antonstolar]

oduho4ka, все равно не работает, можете сделать fork и отредактировать то что вы имели в виду?
https://codesandbox.io/s/white-wind-o1ogd

[oduho4ka]

const {
      stateToPropsDay,
      stateToPropsStartDataArray,
      stateToPropsFilteredDataArray,
      stateToPropsSearchInput,
      stateToPropsCategory
    } = this.props; // не this.props.propsReducer

[antonstolar]

oduho4ka, тоже самое:
https://codesandbox.io/s/white-wind-o1ogd

Answer 2

[Wondermarin]

Взгляните на это несколько раз и сами ответьте на свой вопрос:

const rootReducer = combineReducers({
  propsReducer: reducer
});

const mapStateToProps = state => ({
    onLike: state.propReducer.like
});

А именно на propsReducer (в combineReducers) и propReducer (в mapStateToProps)
И почему в componentDidMount() вы ссылаетесь на какой-то неизвестный реакту this.props.propsReducer.day?

UPD (нерабочие кнопки)

{stateToPropsStartDataArray &&
Object.keys(stateToPropsStartDataArray).map(element => (
  <button
      data-stateToPropsCategory={element}
      onClick={e =>
      onFilter({
          stateToPropsCategory: e.target.dataset.statetopropscategory
      })
      }
      className={
      element === stateToPropsCategory ? "active" : "noActive"
      }
  >
      {element}
  </button>
))}

var newData = state.startDataArray[
  action.stateToPropsCategory || state.category
].filter(x => {
  return x["planeTypeID.code"]
    .toLowerCase()
    .includes(action.search || state.searchInput);
});

https://codesandbox.io/s/frosty-dew-u3wmu

Comments

[antonstolar]

спасибо, только теперь не работают кнопки "departure" и "arrival", в чем может быть причина?

[Wondermarin]

antonstolar, https://codesandbox.io/s/frosty-dew-u3wmu (никто за просто так ваши же ошибки искать не будет, учитесь делать это сами).
1. Вы в dataset ваших кнопок передаете stateToPropsCategory, и далее в onFilter пытаетесь получить к нему доступ через это же имя, но dataset содержит информацию о вашем атрибуте в нижнем регистре, а значит чтобы получить доступ к нему вы должны писать statetopropscategory (если же вы хотите иметь к нему доступ через stateToPropsCategory, то в dataset вы должны были записать его как state-to-props-category).
2. В вашем reducer вы пытаетесь получить категорию через action.category, однако сами же передаете в action stateToPropsCategory...

[antonstolar]

спасибо большое!) удачи вам)