Здраствуйте, изучаю Redux, но не понятны некоторые различия в написании Redux и React кода, поэтому хочу спросить у вас несколько моментов.
Есть главный компонент Redux приложения:
открывать не обязательно, это на случай если что-то непонятно в моих вопросах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 FLIGHT</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);
Непонятна вот эта часть:
<TableSearch value={search} onChange={e => onSetSearch(e.target.value)}
onSearch={value => onFilter({ search: value })}/>
В Reacte значение атрибутов пишут вот так в основном:
onClick={this.methodChange}
В React мы создаем метод methodChange в котором есть setState который что-то изменяет в state.
Но в Redux я такого никогда не видел. Всегда передают значением атрибута анонимную функцию которая возвращает вызов функции с каким то параметром, (иногда даже обьект передают как параметр)....Почему так?
Почему в redux всегда пишут вот так:
onClick={() => onmethodChange(arg)}
Тоесть пишем анонимную функцию и возвращем другую функцию с аргументом а не пишем просто {this.onmethodChange} или хотя бы {this.props.onmethodChange}
И еще один вопрос, в моем коде есть такое:
onSearch={value => onFilter({ search: value })}/>
Почему мы здесь пишем аргументом обьект? Если пишем аргументом переменную она сможет принять значение по ходу исполнения программы, а здесь обьект также будет принимать значение? Обьясните пожалуйста этот момент.
Средний