Answer the question
In order to leave comments, you need to log in
Difference in writing values for attributes in React and in Redux?
Hello, I'm learning Redux, but I don't understand some of the differences in writing Redux and React code, so I want to ask you a few points.
There is a main Redux application component:
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 })}/>
onClick={this.methodChange}
onClick={() => onmethodChange(arg)}
onSearch={value => onFilter({ search: value })}/>
Answer the question
In order to leave comments, you need to log in
Redux has nothing to do with it at all -- Here we cannot throw custom arguments into the method call -- here we can throw any arguments
Only because it's more convenient) And we use destructuring in the onFilter method itself, of course. This will work similarly to the usual forwarding of variables, just the arguments are also named
redux - this is not about components, methods and their calls at all. Redux is actions, reducer and connect(mapStateToProps, mapDispatchToProps) in a component. And how you write and call these actions is entirely up to you.
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question