Here you have an example on how to dispatch and chain async action. https://github.com/gaearon/redux-thunk The thunk middleware knows how to turn thunk async actions into actions, so you just have to have your simple_action() to be a thunk and the thunk middleware will do the job for you, if the middleware see a normal action, … Read more
The Promise approach export default function createUser(params) { const request = axios.post(‘http://www…’, params); return (dispatch) => { function onSuccess(success) { dispatch({ type: CREATE_USER, payload: success }); return success; } function onError(error) { dispatch({ type: ERROR_GENERATED, error }); return error; } request.then(success => onSuccess, error => onError); }; } The async/await approach export default function createUser(params) … Read more
applyMiddleware takes each piece of middleware as a new argument (not an array). So just pass in each piece of middleware you’d like. const createStoreWithMiddleware = applyMiddleware(ReduxThunk, logger)(createStore);
You may use Redux’s mapStateToProps and connect with React’s componentDidUpdate(prevProps, prevState, snapshot) hook. So basically your code could look like this: const mapStateToProps = (state) => ({ specificProperty: state.specificProperty, // any props you need else }); class YourComponent extends React.Component { render() { // render your component } componentDidUpdate(prevProps, prevState, snapshot) { if (prevProps.specificProperty !== … Read more
redux-thunk allows your action creators to return a function : function myAction(payload){ return function(dispatch){ // use dispatch as you please } } redux-promise allows them to return a promise : function myAction(payload){ return new Promise(function(resolve, reject){ resolve(someData); // redux-promise will dispatch someData }); } Both libraries are useful if you need to dispatch action async … Read more
In redux-saga, the equivalent of the above example would be export function* loginSaga() { while(true) { const { user, pass } = yield take(LOGIN_REQUEST) try { let { data } = yield call(request.post, ‘/login’, { user, pass }); yield fork(loadUserData, data.uid); yield put({ type: LOGIN_SUCCESS, data }); } catch(error) { yield put({ type: LOGIN_ERROR, error … Read more
What is wrong with this approach? Why would I want to use Redux Thunk or Redux Promise, as the documentation suggests? There is nothing wrong with this approach. It’s just inconvenient in a large application because you’ll have different components performing the same actions, you might want to debounce some actions, or keep some local … Read more