redux-actions

What is redux-actions?

The redux-actions npm package provides utilities for creating and handling actions in Redux applications. It simplifies the process of defining action creators and reducers, making the code more readable and maintainable.

What are redux-actions's main functionalities?

createAction

The createAction function simplifies the creation of action creators. It takes a single argument, the action type, and returns an action creator function that can be called with a payload.

const { createAction } = require('redux-actions');
const increment = createAction('INCREMENT');
console.log(increment()); // { type: 'INCREMENT' }
console.log(increment(1)); // { type: 'INCREMENT', payload: 1 }

handleAction

The handleAction function allows you to create a reducer for a specific action type. It takes the action creator, a reducer function, and an initial state as arguments.

const { handleAction } = require('redux-actions');
const increment = createAction('INCREMENT');
const reducer = handleAction(increment, (state, action) => state + action.payload, 0);
console.log(reducer(0, increment(1))); // 1

handleActions

The handleActions function allows you to create a reducer that handles multiple action types. It takes an object mapping action creators to reducer functions and an initial state as arguments.

const { handleActions } = require('redux-actions');
const increment = createAction('INCREMENT');
const decrement = createAction('DECREMENT');
const reducer = handleActions({
  [increment]: (state, action) => state + action.payload,
  [decrement]: (state, action) => state - action.payload
}, 0);
console.log(reducer(0, increment(1))); // 1
console.log(reducer(1, decrement(1))); // 0

Other packages similar to redux-actions

redux-toolkit

Redux Toolkit is the official, recommended way to write Redux logic. It includes utilities to simplify common use cases like store setup, creating reducers, and writing immutable update logic. Compared to redux-actions, Redux Toolkit offers a more comprehensive set of tools and is maintained by the Redux team.

redux-saga

Redux Saga is a library that aims to make application side effects (e.g., asynchronous actions) easier to manage, more efficient to execute, and better at handling failures. While redux-actions focuses on simplifying action creation and reducers, redux-saga is more about handling complex side effects in a Redux application.

redux-thunk

Redux Thunk is a middleware that allows you to write action creators that return a function instead of an action. This can be used to delay the dispatch of an action or to dispatch only if a certain condition is met. Unlike redux-actions, which focuses on simplifying action and reducer creation, redux-thunk is more about handling asynchronous actions.

README

redux-actions

Flux Standard Action utilities for Redux

Table of Contents

• Getting Started
  • Installation
  • Usage
• Documentation

Getting Started

Installation

$ npm install --save redux-actions

or

$ yarn add redux-actions

The npm package provides a CommonJS build for use in Node.js, and with bundlers like Webpack and Browserify. It also includes an ES modules build that works well with Rollup and Webpack2's tree-shaking.

The UMD build exports a global called window.ReduxActions if you add it to your page via a <script> tag. We don’t recommend UMD builds for any serious application, as most of the libraries complementary to Redux are only available on npm.

Usage

import { createActions, handleActions, combineActions } from 'redux-actions';

const defaultState = { counter: 10 };

const { increment, decrement } = createActions({
  INCREMENT: (amount = 1) => ({ amount }),
  DECREMENT: (amount = 1) => ({ amount: -amount })
});

const reducer = handleActions(
  {
    [combineActions(increment, decrement)]: (
      state,
      { payload: { amount } }
    ) => {
      return { ...state, counter: state.counter + amount };
    }
  },
  defaultState
);

export default reducer;

See the full API documentation.

Documentation

• Introduction
• API
• External Resources
• Changelog
• Contributors