npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

redux-actions-log

v0.2.0

Published

Actions log middleware for Redux

Downloads

96

Readme

redux-actions-log

License npm Run Tests

Redux Actions Log is a simple Redux middleware that logs actions that are dispatched to the store.

Install

npm install --save redux-actions-log

yarn add redux-actions-log

Usage

Setting up action logging is simple with Redux Actions Log.

import { createStore, applyMiddleware } from 'redux';
import setupReduxActionsLog from 'redux-actions-log';
import rootReducer from './reducers';

const [actionsLogMiddleware, actionsLog] = setupReduxActionsLog();
const store = createStore(rootReducer, applyMiddleware(actionsLogMiddleware));

store.dispatch({
  type: 'FOOBAR_ACTION_TYPE',
  payload: 'baz'
});

console.log(actionsLog.getActions());
// logs "[ { type: 'FOOBAR_ACTION_TYPE', payload: 'baz' } ]"

setupReduxActionsLog() will return the middleware you apply to the Redux store along with the log that will keep track of the dispatched actions.

Once the middleware is applied, all you need to do is call actionsLog.getActions() to retrieve an array of all the logged actions.

By default, the actions log will only log standard Redux actions. If you want to log other functionality that affects actions like Redux Thunk, you must enable the logAll option. There are two ways to do this:

Method 1: Enable the logAll option with the parameter for setupReduxActionsLog().

const [actionsLogMiddleware, actionsLog] = setupReduxActionsLog(true);

Method 2: Set the logAll option with actionsLog.setLogAll().

const [actionsLogMiddleware, actionsLog] = setupReduxActionsLog();
actionsLog.setLogAll(true);

Note that this package supports TypeScript and declaration files are included.

Why Do I Need This?

Before you use this, make sure there aren't better ways to accomplish what you want first!

If you simply need to debug actions, Redux DevTools will most likely do what you need.

If you need to test simple asynchronous action creators, check out redux-mock-store first as it will probably be able to get the job done. (In fact, Redux Actions Log takes a lot of inspiration from this package.)

Now if the above options don't work for you, then this middleware is hopefully what you need! The most common cases where Redux Actions Log can be useful are usually around scenarios when your application or tests need direct access to a log of Redux actions, and you need to work with a real Redux store.

One example of this is if you need to test asynchronous action creators that rely on reducer logic. redux-mock-store unfortunately does not execute reducers, so using Redux Actions Log allows you to test the sequence of dispatched actions on a real store that will actually execute the reducers, allowing your actions to be tested properly as they will behave realistically.

API

setupReduxActionsLog(logAll?: boolean) => [middleware, actionsLog]

The default export of the package will return a setup function that returns two things:

  1. The middleware which you will get working with your Redux store using applyMiddleware().
  2. The log that keeps track of the Redux actions dispatched to the store that has the middleware applied.
actionsLog.getActions() => actions: Array

Returns the actions of the store.

actionsLog.clearActions()

Clears the stored actions.

actionsLog.setLogAll(logAll: boolean)

Turns the logAll option on or off.

actionsLog.getLogAll() => logAll: boolean

Returns the current logAll setting.

License

This project is MIT licensed.