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

Question

[petrro]

Здраствуйте! Изучаю 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);

Answer 1

[Abr_ya]

Сам только разбираюсь с Redux.
Насколько я понял:
1) connect связывает компонент с Redux,
2) при этом передаются, по сути, функции и свойства (state),
3) { type: "RUN_FILTER", ...args } - это action, и лучшая практика - выносить их в отдельный файл,
4) action отработает в reducer-e.

А что за приложение, кстати?)

Answer 2

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

Comments

[petrro]

Конкретно в этом коде не используется mapStateToProps, mapDispatchToProp. Тоесть получается Redux разрешает в connect не писать эти методы? А использовать конструкцию которая есть в данном коде?

[hzzzzl]

petrro, это просто внегласное соглашение, что аргументы так называются, чтобы не забыть что сначала стейт, а потом диспатч :)

Тоесть получается Redux разрешает в connect не писать эти методы? А использовать конструкцию которая есть в данном коде?

для наглядности можно развернуть и вынести в отдельные переменные

const stateToProps = state => ({
  user: state.user    // this.props.user
})

const dispatchToProps = dispatch => {
  return {
    logout: () => {   // this.props.logout()
      dispatch({ type: "USER_LOGOUT" })
    }
  }
}

export default connect( stateToProps , dispatchToProps )(Root);

[petrro]

hzzzzl, ясно) спасибо) я чаще всего встречаю вот такую конструкцию matchDispatchToProps где используется метод :

function matchDispatchToProps(dispatch){ 
    return bindActionCreators({select: select}, dispatch) 
}

Но я так понимаю это аналогично вашему:

const dispatchToProps = dispatch => {
  return {
    logout: () => {   // this.props.logout()
      dispatch({ type: "USER_LOGOUT" })
    }
  }
}