Írtam egy React alkalmazást, amely belső állapot alapú. Az "axios" könyvtárat használja az adatok webes API-ból való lekéréséhez. A következőképpen néz ki:
class OrdersTable extends React.Component {
constructor() {
super();
this.state = {
orders: [],
...
}
componentDidMount() {
setTimeout(() => {
axios.get("http://localhost:1234/api/orders").then(response => {
this.setState({
orders: response.data,
});
});
}, 2000);
}
render () {
return (
<div className="content-wrapper">
<div className="content-left">
<BootstrapTable keyField='id' data={this.state.orders} columns={this.state.columns}
rowStyle = {this.state.rowStyle} rowEvents={this.rowEvents}
caption={<CaptionOrders title="Orders" />} noDataIndication={<NoData />} {...this.props} />
<Legend />
</div>
</div>
)
}
}
Szeretném átalakítani, hogy a belső állapot helyett Reduxot használjon. A következőkkel kezdtem:
index.js:
const store = createStore(reducer);
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
Műveletek:
import { LOAD_DATA } from '../constants/action-types';
export const loadData = orders => ({
type: LOAD_DATA,
payload: orders
})
Csökkentő:
export default initialState = {
orders: []
};
const reducer = (state = initialState, action) => {
switch(action.type) {
case LOAD_DATA:
return {
...state, orders: action.payload };
default:
return state;
}
}
Tartály:
const mapStateToProps = (state) => ({
orders: state.orders
})
const mapDispatchToProps = (dispatch) => ({
// Should "axios" call be here and if so, how should look like?
});
export default connect(mapStateToProps, mapDispatchToProps)(OrdersTable);
Bemutató komponens:
How can I use the orders state from Redux in OrdersTable component?
