erikras / erikras/react-redux-universal-hot-example
examples of complex actions
- Dominant language
- JavaScript
- Stars
- 12.1k
- Forks
- 2.5k
- PR merge metrics
- No merged PRs in 30d
Description
Hi, I'm new to react/redux and I'm somewhat struggling with the concept of complex actions at the moment. Specifically, sequenced async actions with potential redirects and API requests.
It would be awesome if someone could review some of my approaches and give pointers on the issues I've been having.
So, let me provide some code for a generalized use case for actions I come across in my app:
``` js
// make an API request via clientMiddleware, fire store actions
export function apiRequestA(data) {
return {
types: [A_START, A_SUCCESS, A_FAIL],
promise: (client) => client.post('/api/request-a', {data})
};
}
// make several API requests in sequence, with inter-dependencies etc conditionals,
// firing transitional actions and success/failure actions at the end
export function doSomethingAsync({payloadA, payloadB} = {}) {
return (dispatch, getState) => {
let sequence = Promise.resolve();
sequence = sequence.then(() => {
return dispatch(apiRequestA(payloadA)).then(
action => action.type === A_SUCCESS
? Promise.resolve(action.result)
: Promise.reject('error requesting A');
);
});
if (payloadB) {
sequence = sequence.then(result => {
if (result.something) {
return Promise.reject('cannot request B because A returned "something"');
} else {
return dispatch(apiRequestB(payloadB)).then(
action => action.type === B_SUCCESS
? Promise.resolve(action.result)
: Promise.reject('error requesting B')
);
}
});
}
return sequence
.then(result => dispatch({type: DO_SOMETHING_SUCCESS, result}))
.catch(error => dispatch({type: DO_SOMETHING_FAILURE, error}));
};
}
```
Now, this seems to work fine and do the job, but my first question is - maybe there's a canonical way of chaining these API requests, maybe without using the `clientMiddleware`? Or could that be extended for simpler chainability?
My second question is regarding redirects within actions - again, there don't seem to be any examples of this within the project. Consider the following code:
``` jsx
// actions.js
import { pushStore } from 'redux-router';
export function myRedirectAction(url) {
return (dispatch, getStore) => {
return dispatch(pushState(null, url));
};
}
// container.js
import { pushStore } from 'redux-router';
import { myRedirectAction } from './actions';
@connect(
(state) => ({}),
{pushStore, myRedirectAction}
)
class MyComponent extends Component {
render() {
return (
this.props.pushStore(null, '/foo')}>This works
this.props.myRedirectAction('/foo')}>This doesn't work
);
}
}
```
Is there any simple way to redirect from within the action?
Contributor guide
Research direction
The issue names clientMiddleware, actions.js, container.js, and redux-router, but no repository test or specific entry point. Start by locating the middleware and router integration, then compare their behavior with the proposed action examples; done would mean documenting canonical chained requests and redirects from actions, if the project supports them.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- frontend
- Issue type
- Documentation
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 22/100