What is the right way to do asynchronous operations in Redux?

It’s understandable why so many newcomers to React+Redux have difficulty wrapping their heads around asynchronous actions. React is simply a view layer. Redux is simply a state management layer. But it takes much more to build a typical app.

These poor developers are given the corner pieces of a puzzle and the rest of the pieces are scattered about on the ground. There’s no reference picture to see what the puzzle is supposed to look like — everyone you ask would show you a different picture anyways.

Even developers experienced in React+Flux have difficulty picking up Redux because now they’re told not to put asynchronous calls in their components. Well then, where?

Continue reading “What is the right way to do asynchronous operations in Redux?”

What is the right way to do asynchronous operations in Redux?

Back to Basics: What’s the Difference between an Action and an Action Creator in Redux.js?

Looking at Redux.js for the first time can be overwhelming because there are so many moving parts. There are a few similar-sounding terms to learn such as actions, action types, and action creators. Understanding what they are and how to use them is the first step to adding Redux to your application.

Continue reading “Back to Basics: What’s the Difference between an Action and an Action Creator in Redux.js?”

Back to Basics: What’s the Difference between an Action and an Action Creator in Redux.js?

Has Redux-Saga Got You Stuck In an Infinite Loop?

You might start out with a saga that looks something like the following code. No problem, it runs perfectly.

function* fetchSomethingSaga() {
    // Run this saga forever
    while (true) {
        // Wait for a fetch request
        const action = yield take(Action.FETCH_SOMETHING_REQUEST);

        // Extract the id of what we need to fetch
        const id = action.payload;

        try {
            // Make the API call
            const thing = yield call(apiClient.get, `/thing/${id}`);

            // We succeeded, return the thing
            yield put(fetchSomethingSuccess(thing));
        catch (err) {
            // We failed, report the error
            yield put(fetchSomethingFailure(err));
        }
    }
}

At some point, you decide to replace take with takeEvery so your saga can handle concurrent requests. Or you replace it with takeLatest so you can process the most recent request.

But… your events start firing in an infinite loop. Hey, what gives?

Continue reading “Has Redux-Saga Got You Stuck In an Infinite Loop?”

Has Redux-Saga Got You Stuck In an Infinite Loop?