Redux Actions

Redux Actions is a library that provides utilities for creating Redux actions and reducers. It's designed to be lightweight, modular, and easy to use. In this guide, we'll take a look at how to use Redux Actions to create actions and reducers for your Redux application.

Installation

You can install Redux Actions using npm:

npm install redux-actions

Creating Actions

Redux Actions provides a createAction function that helps you create Redux actions. Here's an example:

import { createAction } from 'redux-actions';

export const increment = createAction('INCREMENT');
export const decrement = createAction('DECREMENT');

In this example, we're creating two actions: increment and decrement. We're using the createAction function to create these actions. The argument we're passing to createAction is the type of the action. INCREMENT and DECREMENT are just strings that we've chosen to represent our actions.

By using createAction, we get a simpler and more concise way to write actions. Instead of writing:

export const increment = () => ({
  type: 'INCREMENT'
});

export const decrement = () => ({
  type: 'DECREMENT'
});

We can simply write:

export const increment = createAction('INCREMENT');
export const decrement = createAction('DECREMENT');

Creating Reducers

Redux Actions also provides a handleActions function that helps you create Redux reducers. Here's an example:

import { handleActions } from 'redux-actions';
import { increment, decrement } from './actions';

const initialState = { count: 0 };

export const counterReducer = handleActions(
  {
    [increment]: (state) => ({ count: state.count + 1 }),
    [decrement]: (state) => ({ count: state.count - 1 }),
  },
  initialState,
);

In this example, we're creating a counter reducer. We're using the handleActions function to create this reducer. The first argument we're passing to handleActions is an object that maps action types to reducer functions. The second argument is the initial state of the reducer.

Each reducer function takes a state parameter and returns a new state object. In this case, our reducer functions are just incrementing or decrementing the count property of the state object.

By using handleActions, we get a simpler and more concise way to write reducers. Instead of writing:

const initialState = { count: 0 };

export function counterReducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

We can simply write:

import { handleActions } from 'redux-actions';
import { increment, decrement } from './actions';

const initialState = { count: 0 };

export const counterReducer = handleActions(
  {
    [increment]: (state) => ({ count: state.count + 1 }),
    [decrement]: (state) => ({ count: state.count - 1 }),
  },
  initialState,
);

Conclusion

Redux Actions is a great library for creating Redux actions and reducers. It provides a simpler and more concise way to write these essential parts of your Redux application. By using Redux Actions, you can write code that is more modular, easier to read, and easier to maintain.