javascript - How do I handle multiple calls in one thunk function? -
i don’t know if has read this: https://medium.com/@stowball/a-dummys-guide-to-redux-and-thunk-in-react-d8904a7005d3?source=linkshare-36723b3116b2-1502668727 teaches how handle one api requests redux , redux thunk. it’s great guide, wonder if react component having more 1 request server? this:
componentdidmount() { axios.get('http://localhost:3001/customers').then(res => { this.setstate({ res, customer: res.data }) }) axios.get('http://localhost:3001/events').then(res => { this.setstate({ res, event: res.data }) }) axios.get('http://localhost:3001/locks').then(res => { this.setstate({ res, lock: res.data }) }) }
i've been googling crazy , think i've made progress, action creator looks (don't know if 100% correct):
const fetchdata = () => async dispatch => { try { const customers = await axios.get(`${settings.hostname}/customers`) .then(res) => res.json() const events = await axios.get(`${settings.hostname}/events`) .then(res) => res.json() const locks = await axios.get(`${settings.hostname}/locks`) .then(res) => res.json() dispatch(setcustomers(customers)) dispatch(setevents(events)) dispatch(setlocks(locks)) } catch(err) => console.log('error', err) }
so next step create reducers, made one:
export function events(state = initialstate, action) { switch (action.type) { case 'events_fetch_data_success': return action.events; default: return state; } }
here's problem:
i don't know how handle inside of component now. if follow article ( https://medium.com/@stowball/a-dummys-guide-to-redux-and-thunk-in-react-d8904a7005d3?source=linkshare-36723b3116b2-1502668727) end this:
componentdidmount() { this.props.fetchdata('http://localhost:3001/locks') }
and
doors.proptypes = { fetchdata: proptypes.func.isrequired, doors: proptypes.object.isrequired } const mapstatetoprops = state => { return { doors: state.doors } } const mapdispatchtoprops = dispatch => { return { fetchdata: url => dispatch(doorsfetchdata(url)) } } export default connect(mapstatetoprops, mapdispatchtoprops)(doors)
my question
so question how should handle multiple requests inside of component now? sorry if questions seems lazy, can't figure out , i've been trying to.
all super appreciated!!
assuming request not depend on each other, suggest keeping each action separate. possible benefits of approach:
- easier debugging
- easier testing
- closer single responsibility principle
suggested implementation
actions:
const fetchcustomers = () => dispatch => { try { axios.get(`${settings.hostname}/customers`) .then(res => { dispatch(setcustomers(res.json())) }) } catch(err) => console.log('error', err) } const fetchevents = () => dispatch => { try { axios.get(`${settings.hostname}/events`) .then(res => { dispatch(setevents(res.json())) }) } catch(err) => console.log('error', err) } const fetchlocks = () => dispatch => { try { axios.get(`${settings.hostname}/locks`) .then(res => { dispatch(setlocks(res.json())) }) } catch(err) => console.log('error', err) }
doors component snippet:
import * actioncreators './actions.js' import { bindactioncreators } 'redux' /*...*/ componentdidmount() { this.props.fetchcustomers(); this.props.fetchevents(); this.props.fecthlocks(); } const mapstatetoprops = state => { return { customers: state.doors.customers, events: state.doors.events, locks: state.doors.locks } } const mapdispatchtoprops = dispatch => { return bindactioncreators(actioncreators, dispatch); } export default connect(mapstatetoprops, mapdispatchtoprops)(doors)
edit: added example reducer , adopted mapstatetoprops
accordingly. in reducer instance doors
container's state , holds events
, locks
, customers
:
export function events(state = initialstate, action) { switch (action.type) { case 'events_fetch_success': return object.assign({}, state, {events: action.events}); case 'customers_fetch_success': return object.assign({}, state, {customers: action.customers}); case 'locks_fetch_success': return object.assign({}, state, {locks: action.locks}); default: return state; } }
now requests executed in parallel , they fail independently.
Comments
Post a Comment