Redux is a predictable state container for JavaScript apps.
It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test.

redux

Redux is a powerful way to manage application state, but that power can come with a lot of code. A single update can sometimes require changes across many files and the code required to define action creators and to handle those actions in your reducer can start to get pretty repetitive.

The redux-actions library offers a small but powerful API to help cut down on some of the boilerplate that is typical of an application that uses Redux to handle state management.

One of the biggest complaints people tend to have about Redux is the amount of boilerplate code you end up writing to use it. It doesn't have to be that way!

Redux actions will simplify the code for our action creators and even give us a new way to create our reducers.

By using redux-actions, our application will use Flux Standard Actions, keeping the way we manage our state more consistent. 

This small library only exposes a few functions for its API, so it won't take long to learn, but it will make a huge difference in how we write action creators and reducers for redux.

Introducing Reduce Redux Boilerplate with Redux-Actions

In this lesson, we’ll review the React and Redux application we’ll be working with and install redux-actions as a project dependency using the yarn package manager.

Add redux-actions as a Dependency of a React and Redux App

In this lesson, we’ll take one of the existing action creators and replace it using the `createAction` function provided by `redux-actions`. Using `createAction` reduces some boilerplate and more importantly, it ensures that our Actions adhere to the FSA (Flux Standard Action) structure.

Refactor a Redux Action Creator using the createAction function from redux-actions

In this lesson, we’ll use the optional payloadCreator function argument for `createAction` to transform the raw input into data that is properly formatted for our application.


Modify a Redux Action’s Payload upon Creation with redux-actions

In this lesson, we’ll use the plural `createActions` function and an action map to create multiple action creators with a single utility from redux actions.

Create Multiple Redux Actions with an Action Map in redux-actions

In this lesson, we’ll use the `handleAction` function provided by redux-actions to create a reducer function that will handle a specific action. We’ll then incorporate this reducer function into the existing reducer and ensure our application continues to function.


Create a Reducer Function for a Specific Redux Action using redux-actions

In this lesson, we’ll add the `reduce-reducers` library to our project and use it in conjunction with the `handleAction` function from `redux-actions` to define separate reducer functions for each action and reduce them into a single reducer function with `reduce-reducers`. Say reducer one more time!

Combine Individual Reducer Functions into a Single Reducer with reduce-reducers

Sometimes, multiple actions can be used to update state using the same function. In this lesson, we’ll see how to use `combineActions` to handle separate but related actions in a single action handler.

Handle Multiple Actions using a Single Function with combineActions in redux-actions


We're using the reduced reducers library to take these individual reducers that we've created with handle action and combine them into a single reducer. This is a fairly common need.

In this lesson, we’ll use the `handleActions` function provided by redux-actions to create a reducer that will handle multiple actions, using a reducerMap.

Create a Reducer Function for Multiple Redux Actions using redux-actions

In this lesson, we’ll see how we can handle success and error conditions independently using `next` and `throw` properties in a `reducerMap` with `handleActions`. We’ll add calls to `catch` for our `fetch` calls and display error messages when we encounter an error.

Handle Error Conditions in a Reducer using redux-actions

In this lesson, we’ll add meta data to a redux action using the optional metaCreator function argument for `createAction`. Attaching meta data to an action allows us to pass information that isn’t part of our payload to our reducer. In this case, we’ll use the meta property on our action to show an error message with some information specific to the action

Reduce Redux Boilerplate with Redux-Actions

Andy Van Slaars

Course Content