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

Question

Существует код для одного приложения 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

Весь проект в песочнице: https://codesandbox.io/s/white-wind-o1ogd

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

Код Вариант, который работает хорошо (до изменений):

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.day]);
  }

  render() {
    const { onFilter, onSetSearch, onFetchData } = this.props;
    const {
      stateToPropsDay,
      stateToPropsStartDataArray,
      stateToPropsFilteredDataArray,
      stateToPropsSearchInput,
      stateToPropsCategory
    } = this.props;
    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))
});

export const ConnectedRoot = connect(
  mapStateToProps,
  matchDispatchToProps
)(Root);

в редукторе, я прошел состояние, подобное это:

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

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

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

Answer 1

1. Вы должны подключить Root (вы, вероятно, сделали это)

export default connect(mapStateToProps, matchDispatchToProps)(Root)

см. https://react-redux.js.org/api/connect#connect

Вы получаете доступ ко всем этим атрибутам как к реквизитам в вашем компоненте

const { onFilter, onSetSearch, onFetchData, stateToPropsStartDataArray } = this.props;

Ко всем этим вы можете получить доступ из this.props .something