@petrro

Несколько вопросов по Redux-React коду?

Здраствуйте! Изучаю Redux. Есть приложение Redux которое отправляет запрос к API - получает данные и отображает их на странице, а потом данные можно фильтровать поисковым фильтром и кнопками. Но в главном компоненте, не могу понять маленькую часть кода:

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);


Что в целом делает этот код? И что делает каждая строка данного кода? Откуда взялись onFilter, onSetSearch, onFetchData? Мы их только что, здесь создали? В методе connect?
А вот главный компонент полностью:
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</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);
  • Вопрос задан
  • 86 просмотров
Решения вопроса 2
Abr_ya
@Abr_ya
Сам только разбираюсь с Redux.
Насколько я понял:
1) connect связывает компонент с Redux,
2) при этом передаются, по сути, функции и свойства (state),
3) { type: "RUN_FILTER", ...args } - это action, и лучшая практика - выносить их в отдельный файл,
4) action отработает в reducer-e.

А что за приложение, кстати?)
Ответ написан
Комментировать
hzzzzl
@hzzzzl
Мы их только что, здесь создали? В методе connect?

да,
https://react-redux.js.org/api/connect
connect(mapStateToProps, mapDispatchToProps)(ReactComponent)

то есть в первом аргументе добавляешь в пропсы компонента стейт редукса, а во втором аргументе добавляешь к пропсам ссылки на редуксовые action'ы

export const ConnectedRoot = connect(
  state => state,   // стейт редукса целиком доступен в this.props.propReducer итд
  dispatch => ({
    onFilter: args => dispatch({ type: "RUN_FILTER", ...args }),
    // this.props.onFilter() будет вызывать "RUN_FILTER" в редусере
  })
)(Root);
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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