react: 0.14.3
react-router: 1.0.0
react-redux: 4.0.0
redux: 3.0.4
redux-thunk: 1.0.0
redux-promise-middleware: 2.2.4
I have everything working together great, but I'm reaching a point in development where it would be beneficial to start chaining a series of actions together. I know this has been covered in the README, #8, #24, and lots of other places, but I simply can't get any of them to work, so I must be going about it completely wrong.
Here's an example use case:
- Create - creates a new record via async service call, store in {record: {}} state
- Start - wait for the record to be created and then update the record in state to start a process
- Redirect - redirect to a new page beginning the process
The Create and Start are individual actions that I'd like to use in a single new action if the user knows that they want to start the process when they create the record.
actions.jsx
export function create(name) {
return {
type: CREATE,
payload: {
promise: axios.post(`${apiRoot}/create`, {name: name})
}
}
}
export function start() {
return {
type: START,
payload: {
promise: Promise.resolve()
}
}
}
reducer.jsx
case `${CREATE}_PENDING`:
...
case `${CREATE}_SUCCESS`:
...
case `${CREATE}_ERROR`:
...
case `${START}_PENDING`:
...
case `${START}_SUCCESS`:
...
case `${START}_ERROR`:
Individually, both actions (action creators) do exactly what I want them to do. However, I never seem to be able to get the second action to dispatch after the first one has finished.
I won't list all of the things I've tried, but here's an example of a failed attempt from #24.
export function createAndStart(name) {
return (dispatch) => {
dispatch({
type: CREATE_AND_START,
payload: {
promise: new Promise((resolve, reject) => {
dispatch(create(name))
.then(() => {
dispatch(start());
})
.then(() => {
dispatch(push('/start'));
})
})
}
});
};
}
In this example, I see the createInspection action dispatched. I see it flow through each reducer state _PENDING then _SUCCESS, but I never see anything fall into the next .then()
I'm certain that I'm doing something stupid, but nothing has worked for me. The example in the README fails for me initially because dispatch isn't the first argument I see, action is. But even if I change that, the second action never gets dispatched.
bad
Promise.resolve((dispatch, getState) =>
good
Promise.resolve((action, dispatch, getState) =>
I appreciate any help that folks can offer. Thank you!