erikras / erikras/react-redux-universal-hot-example

examples of complex actions

Open
#880 2 comments 0 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.