how to write async redux actions in a non-fake app

Question

tl;dr: I need an example of an asynchronous redux-thunk action shows how to make an async call (e.g. fetch), and trigger a state update. I also need to see how someone might chain multiple such actions together, like: (1) see if user exists in cloud, then (2) if no, register them, then (3) use the new user record to fetch more data.

---

All the examples I've found makes the assumption that the redux store can be imported directly into the module that defines the actions. It's my understanding that this is a bad practice: the calling component is responsible for providing access to the store, via this.props.dispatch (which comes from the store being injected via the <Provider>).

Instead, every action in the redux world should return a function that will receive the appropriate dispatch; that function should do the work, and return... something. Obv, it matters what the something is.

Here's the pattern I've tried, based on the documentation, that has proven to be a failure. Nothing in the docs makes it clear why this doesn't work, but it doesn't -- because this action doesn't return a promise.

/**
 * pushes a new user into the cloud; once complete, updates the store with the new user row
 * @param  {hash} user - of .firstName, .lastName
 * @return {promise} resolves with user { userId, firstName, lastName, dateCreated }, or rejects with error
 */
Actions.registerUser = function(user) {
    return function reduxAction(dispatch) {
        return API.createUser(user) // API.createUser just does return fetch(...)
        .then(function onUserRegistered(newUser) {
            return dispatch({
                type: 'ADD_USERS',
                users: [newUser]
            });
        });
    };
};

I have a reducer that responds to the ADD_USERS event; it merges the incoming array of one or more users with the array of users already in memory. Reducers are easy to write. That's why I switched to redux: one store, pure functions. But this thunk business is an absolute nightmare.

The error I receive is that .then is undefined on Actions.registerUser -- i.e. that Actions.registerUser doesn't return a promise.

I think the problem is obviously that I'm returning a function -- the reduxAction function -- but that doesn't seem to be negotiable. The only way to shoot data at the store is to use the dispatch method that is provided, and that means I can't return a promise.

Changing the onUserRegistered to simply invoke dispatch and then return the desired value doesn't work either, nor does having it return an actual promise.

PLZ HALP. I really don't get it. I can't believe people put up with all this.

---

EDIT: To provide some context, here's the kind of action composition I think I'm supposed to be able to perform, and which these thunk actions are frustrating:

Actions.bootSetup = function() {
    return dispatch => {
        return Actions.loadUserId() // looks for userId in local storage, or generates a new value
        .then(Actions.storeUserId) // pushes userId into local storage
        .then((userId) => {
            return Actions.fetchUsers(userId) // fetches the user, by id, from the cloud
            .then((user) => {
                // if necessary, pushes the user into the cloud, too
                return user || Actions.postUser({ userId: userId, firstName: 'auto-registered', lastName: 'tbd'}); 
            });
        })
        .then((user) => {
            console.log(`boot sequence complete with user `, user);
            return dispatch({ type: 'ADD_OWNER', user });
        });
    };
};

I would expect that Actions.storeUserId and Actions.fetchUsers would, in addition to returning promises that resolve with values of my choosing, dispatch data to the store as a side-effect. I think the dispatch is occurring, but the chain breaks because none of these actions return promises - they return plain functions.

Not only does this seem much worse than Flux, it seems incomprehensible. I can't believe that all this madness was necessary just to consolidate app state into a single reducing store.

And yes -- I have tried the new version of flux, with its ReducerStore, but it has some inappropriate dependencies on CSS libraries that are incompatible with react-native. The project maintainers have said they don't intend to resolve the issue. I guess their state container is dependent on CSS functionality.

---

EDIT: my store

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import Reducers from './reducers';

const createStoreWithMiddleWare = applyMiddleware(thunk)(createStore);


export const initialState = {
    users: [] // will hold array of user objects
};

const store = createStoreWithMiddleWare(Reducers);

export default store;

---

EDIT: Here's the calling code. This is the root-level react-native component.

// index.ios.js
import Store from './store';

class myApp extends Component {

    componentDidMount() {
        Store.dispatch(Actions.bootSetup())
        .then(() => {
            console.log('*** boot complete ***');
        });
    }

    render() {
        return (
            <Provider store={Store}>
                <ApplicationRoutes />
            </Provider>
        );
    }

}

My assumption is that Store.dispatch expects a function, and provides it with a reference to the store's dispatch method.

Answer 1

I can see one mistake right off the bat

Actions.bootSetup = function() {
    return dispatch => {
        return Actions.loadUserId()

You aren't chaining thunk actions correctly. If your actions returns a function, you need to pass dispatch to that action.

Take a look at this action creator(this is a fully functional real-world app, feel free to poke around), look at the 9th line, where loginUser is called.

export function changePassword(credentials) {
    return (dispatch, getState) => {
        dispatch(changePasswordStart(credentials))
        return Firebase.changePassword(credentials)
            .then(() => {
                return logout()
            })
            .then(() => {
                return loginUser(credentials.email, credentials.newPassword)(dispatch)
            })
            .then(() => {
                    dispatch(changePasswordSuccess(credentials))
                    toast.success('Password successfully changed')
            }).catch(error => {
                    dispatch(changePasswordError(error.code))
                    toast.error('An error occured changing your password: ' + error.code)
            })
    }
}

Because loginUser is also a thunk action, it needs to have dispatch passed to the result of calling it. It makes sense if you think about it: the thunk doesn't do anything, it just creates a function. You need to call the function it returns to get it to do the action. Since the function it returns takes dispatch as an argument, you need to pass that in as well.

Once that's done, returning a promise from a thunk action will work. In fact, the example I gave above does exactly that. loginUser returns a promise, as does changePassword. Both are thenables.

Your code probably needs to look like this (though I am not sure, I don't have the actions being called)

Actions.bootSetup = function() {
    return dispatch => {
        return Actions.loadUserId()(dispatch) // pass dispatch to the thunk
        .then(() => Actions.storeUserId(dispatch)) // pass dispatch to the thunk
        .then((userId) => {
            return Actions.fetchUsers(userId)(dispatch) // pass dispatch to the thunk
            .then((user) => {
                // pass dispatch to the thunk
                return user || Actions.postUser({ userId: userId, firstName: 'auto-registered', lastName: 'tbd'})(dispatch); 
            });
        })
        .then((user) => {
            console.log(`boot sequence complete with user `, user);
            return dispatch({ type: 'ADD_OWNER', user });
        });
    };
};