Как переделать код mapStateToProps к такому виду?

Question

[antonstolar]

Часто mapStateToProps пишут вот так, ну я чаще всего видел такую запись(пример):

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

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

const mapStateToProps = state => state;

В двух словах обьясните такую запись и помогите пожалуйста переделать такую запись в такую которую написал в примере сверху вопроса, тоесть такую:

spoiler

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

Мой reducer:

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

И combineReducers для reducer:

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

и напишу маленькую часть файла app.js:

App.js

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

    return (
      <div>
        <div className="content">
        
        <Header/>
        <br/>
        <div className="searchTitle">SEARCH FLIGHT</div>
             <br/>
        <TableSearch value={searchInput} onChange={e => onSetSearch(e.target.value)} 
         onSearch={value => onFilter({ search: value })}/>
             <br/>
             <br/>
        <div className="buttonCategory">
          {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>
          ))}
        </div>
          
        <div className="row">
        <span className="title">Yesterday: </span><span className="title">Today: </span><span className="title">Tomorrow: </span>
        </div>

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

        {startDataArray && <TableData dataAttribute={filteredDataArray} />}
          </div>
        <Footer/>
      </div>
    );
  }
}

Answer 1

[hzzzzl]

я только про первую часть вопроса, но подробнее

map State To Props = соотнести стейт (редюсера) с пропсами (компонента)
то есть функция получает целый стейт редюсера, возвращает объект, который добавляется к пропсам компонента

const mapStateToProps = state => ({
    onLike: state.propReducer.like
});
// this.props.onLike = reducer.state.onLike

const mapStateToProps = state => state;
// this.props.state = целый большой объект стейт редюсера

почему так лучше не делать? потому что при ЛЮБОЙ даже незначительной смене стейта компонент будет перередериваться, лучше забирать в компонент только самое необходимое

Comments

[antonstolar]

Тоесть такой записи:
const mapStateToProps = state => state;

аналогична будет такая?

const mapStateToProps = state => ({
    state: this.props.propsReducer.state
});

[hzzzzl]

antonstolar,

возвращает объект, который добавляется к пропсам компонента

то есть именно вернуть целый стейт, если ты хочешь ЦЕЛЫЙ стейт прописать в пропсы

const mapStateToProps = state => state; // должно сработать

const mapStateToProps = state => {
    console.log(state) // см что будет, это весь стейт из редусера
    // скорее всего объект типа { propsReducer: {...} }
    return { wholeState: state }  // в компоненте будет this.props.wholeState
};

помни, что это всё обычный javascript, если что-то непонятно, то в любой момент можно вывести в консоль

[antonstolar]

hzzzzl,

пробовал вот так написать:

const mapStateToProps = state => {
    console.log(state) // см что будет, это весь стейт из редусера
    // скорее всего объект типа { propsReducer: {...} }
    return { wholeState: state }  // в компоненте будет this.props.wholeState
};

и у меня ошибка:



тоесть если я хочу целый большой объект стейт редюсера то только так можно написать:
const mapStateToProps = state => state;
?

Просто хочу увидеть как это выглядит не сокращенной записью а развернутой записью, с this.props.state и т.д.