Redux DevTools remotely.

Overview

Remote Redux DevTools

Demo

Use Redux DevTools remotely for React Native, hybrid, desktop and server side Redux apps.

Installation

npm install --save-dev remote-redux-devtools

Note: for Windows use [email protected] (newer versions will not work due to a Windows issue fixed in react-native).

Usage

There are 2 ways of usage depending if you're using other store enhancers (middlewares) or not.

Add DevTools enhancer to your store

If you have a basic store as described in the official redux-docs, simply replace:

import { createStore } from 'redux';
const store = createStore(reducer);

with

import { createStore } from 'redux';
import devToolsEnhancer from 'remote-redux-devtools';
const store = createStore(reducer, devToolsEnhancer());
// or const store = createStore(reducer, preloadedState, devToolsEnhancer());

Note: passing enhancer as last argument requires [email protected]>=3.1.0

When to use DevTools compose helper

If you setup your store with middlewares and enhancers like redux-saga and similar, it is crucial to use composeWithDevTools export. Otherwise, actions dispatched from Redux DevTools will not flow to your middlewares.

In that case change this:

import { createStore, applyMiddleware, compose } from 'redux';

const store = createStore(reducer, preloadedState, compose(
  applyMiddleware(...middleware),
  // other store enhancers if any
));

to:

import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'remote-redux-devtools';

const store = createStore(reducer, /* preloadedState, */ composeWithDevTools(
  applyMiddleware(...middleware),
  // other store enhancers if any
));

or with devTools' options:

import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'remote-redux-devtools';

const composeEnhancers = composeWithDevTools({ realtime: true, port: 8000 });
const store = createStore(reducer, /* preloadedState, */ composeEnhancers(
  applyMiddleware(...middleware),
  // other store enhancers if any
));

Enabling

In order not to allow it in production by default, the enhancer will have effect only when process.env.NODE_ENV === 'development'.

For Webpack you should add it as following (webpack.config.dev.js):

// ...
plugins: [
  new webpack.DefinePlugin({
    'process.env.NODE_ENV': JSON.stringify('development')
  })
],
// ...

In case you don't set NODE_ENV, you can set realtime parameter to true or to other global variable to turn it off in production:

const store = createStore(reducer, devToolsEnhancer({ realtime: true }));

Monitoring

Use one of our monitor apps to inspect and dispatch actions:

Use remotedev-app to create your own monitor app.

Communicate via local server

In order to make it simple to use, by default, the module and the monitor app communicate via remotedev.io server. Use remotedev-server cli to run it locally in order to make the connection faster and not to require an internet connection. You can import it in your server.js script and start remotedev server together with your development server:

var remotedev = require('remotedev-server');
remotedev({ hostname: 'localhost', port: 8000 });

See remotedev-server repository for more details. For React Native you can use remotedev-rn-debugger, which already include remotedev-server.

Parameters

Name Description
name String representing the instance name to be shown on the remote monitor.
realtime Boolean specifies whether to allow remote monitoring. By default is process.env.NODE_ENV === 'development'.
hostname String used to specify host for remotedev-server. If port is specified, default value is localhost.
port Number used to specify host's port for remotedev-server.
secure Boolean specifies whether to use https protocol for remotedev-server.
maxAge Number of maximum allowed actions to be stored on the history tree, the oldest actions are removed once maxAge is reached. Default is 30.
actionsBlacklist array of actions to be hidden in DevTools. Overwrites corresponding global setting in the options page. See the example bellow.
actionsWhitelist array of actions to be shown. All other actions will be hidden in DevTools.
actionSanitizer Function which takes action object and id number as arguments, and should return action object back. See the example bellow.
stateSanitizer Function which takes state object and index as arguments, and should return state object back. See the example bellow.
startOn String or Array of strings indicating an action or a list of actions, which should start remote monitoring (when realtime is false).
stopOn String or Array of strings indicating an action or a list of actions, which should stop remote monitoring.
sendOn String or Array of strings indicating an action or a list of actions, which should trigger sending the history to the monitor (without starting it). Note: when using it, add a fetch polyfill if needed.
sendOnError Numeric code: 0 - disabled (default), 1 - send all uncaught exception messages, 2 - send only reducers error messages.
sendTo String url of the monitor to send the history when sendOn is triggered. By default is ${secure ? 'https' : 'http'}://${hostname}:${port}.
actionCreators Array or Object of action creators to dispatch remotely. See the example.
shouldHotReload Boolean - if set to false, will not recompute the states on hot reloading (or on replacing the reducers). Default to true.
shouldRecordChanges Boolean - if specified as false, it will not record the changes till clicked on "Start recording" button on the monitor app. Default is true.
shouldStartLocked Boolean - if specified as true, it will not allow any non-monitor actions to be dispatched till lockChanges(false) is dispatched. Default is false.
id String to identify the instance when sending the history triggered by sendOn. You can use, for example, user id here, to know who sent the data.
suppressConnectErrors Boolean - if set to false, all socket errors thrown while trying to connect will be printed to the console, regardless of if they've been thrown before. This is primarily for suppressing SocketProtocolError errors, which get repeatedly thrown when trying to make a connection. Default is true.

All parameters are optional. You have to provide at least port property to use localhost instead of remotedev.io server.

Example:

export default function configureStore(preloadedState) {
  const store = createStore(
    reducer,
    preloadedState,
    devToolsEnhancer({
      name: 'Android app', realtime: true,
      hostname: 'localhost', port: 8000,
      maxAge: 30, actionsBlacklist: ['EFFECT_RESOLVED'],
      actionSanitizer: (action) => (
       action.type === 'FILE_DOWNLOAD_SUCCESS' && action.data ?
       { ...action, data: '<<LONG_BLOB>>' } : action
      ),
      stateSanitizer: (state) => state.data ? { ...state, data: '<<LONG_BLOB>>' } : state
    })
  );
  return store;
}

Demo

Examples

License

MIT

Issues
  • Unknown module

    Unknown module "ws" exception on Windows

    screenshot_2016-08-21-13-40-42 1

    I'm developing on windows 10 + android 5.0 device. After installing remote-redux-devtools as described on readme.md i got the error Requiring unknown module "url" It seems socketcluster-client uses ws/WebSocket.js and do a require("url") and this raises the error

    On the web I have not found similar problems so I'm worried this happen only to me

    this my package.json `{

    "version": "0.0.1", "private": true, "scripts": { "start": "node node_modules/react-native/local-cli/cli.js start" }, "dependencies": { "react": "15.2.1", "react-native": "0.30.0", "react-redux": "^4.4.5", "redux": "^3.5.2" }, "devDependencies": { "remote-redux-devtools": "^0.4.2" } }`

    opened by Luk-z 56
  • JSON value '1' of type NSNumber cannot be converted to NSString

    JSON value '1' of type NSNumber cannot be converted to NSString

    having this problem with react-native version 0.36.0, i'm using latest remote-redux-devtools screen shot 2016-10-29 at 7 31 14 pm

    used https://github.com/jhen0409/remote-redux-devtools-on-debugger/ also

    opened by tarex 27
  • Unknown named module: 'crypto'

    Unknown named module: 'crypto'

    E/ReactNativeJS: Unknown named module: 'crypto' When i do import import devToolsEnhancer from 'remote-redux-devtools';

    opened by Chapurin 22
  • remotedev.io is offline

    remotedev.io is offline

    just wanted to let you know that remotedev.io is offline for ~20 hours. :)

    opened by aeneasr 21
  • Error in React Native when connected to Chrome debugger

    Error in React Native when connected to Chrome debugger

    When the app is connected to chrome debugger, it shows the following error message,

    screenshot_20160110-174529

    I don't see the @@INIT action, so I assume it's unable to connect.

    It works fine if not connected to the debugger. For now I detect if the app is running in a web worker instance and disable the dev tools.

    const middlewares = [ applyMiddleware(thunk) ];
    
    if (typeof global.self === 'undefined') {
        middlewares.push(devTools());
    }
    
    const finalCreateStore = compose(
        ...middlewares
    )(createStore);
    
    opened by satya164 18
  • Crashing in react-native when not debugging

    Crashing in react-native when not debugging

    Running on RN 0.57.7 The following line: import { composeWithDevTools } from 'remote-redux-devtools'

    causes the app to crash if remote debugging is not turned on.

    simulator screen shot - iphone 8 - 2018-12-27 at 08 21 44

    "your browser does not have a secure random generator. If you don't need unpredictable IDs, you can use nanoid/non-secure"

    opened by martinchristov 15
  • Cannot read property 'WebSocket' of undefined

    Cannot read property 'WebSocket' of undefined

    I get the error message on iOS right after i import devTools with import devTools from 'remote-redux-devtools'; in my store.js.

    screen shot 2016-01-21 at 10 17 15

    opened by maluramichael 14
  • 0.4.0 throws Actions must be plain objects error

    0.4.0 throws Actions must be plain objects error

    Trying the dispatcher, it seems v0.4.0 broke it, it throws with "Actions must be plain objects, use middleware for async actions".

    opened by blackxored 11
  • looping the slider

    looping the slider

    I read an article a few months ago--I think by @zalmoxisus--about how @gaearon was initially interested in being able to have his application states looped through while he made changes to the code. It seems it would be trivial at this point to implement that in the redux devtools slider. Perhaps with 2 modes:

    • looping from left to right, then from right to left, repeat (i.e. like "pong")
    • looping from left to right, then left to right again, repeat

    Are there any challenges to implementing this or reasons why nobody has done it yet?

    opened by faceyspacey 10
  • remote-redux-devtools doesn't work with latest RN 0.56 release

    remote-redux-devtools doesn't work with latest RN 0.56 release

    It doesn't work due to incorrect 'rn-host-detect' behavior. This is similar issue which also has workaround - https://github.com/infinitered/reactotron/issues/724

    opened by todorone 10
  • Porn Link

    Porn Link

    Hello. The link to http://remotedev.io/local currently redirects to pornogrophy.

    NSFW. This is linked to directly within the readme file.

    opened by jakiestfu 0
  • Stable Alternative - for anyone coming here new!

    Stable Alternative - for anyone coming here new!

    I'm from the vue.js ecosystem, where the devtools are maintained really well, also there is an electron-standalone (https://devtools.vuejs.org/guide/installation.html#standalone)...

    I had to try redux for a nodejs app, and I had hard-time making the remote-redux work with various combinations... esp got the socket error etc etc..

    Noticed the below (reply to a old issue couple of years ago) and it worked like a charm.. Any new comers, don't forget to check this out if you are stuck!

    https://github.com/TyrealGray/remoteredux-standalone

    Thanks to @TyrealGray


    EDIT: Alright, I did manage to make it work without the above standalone alternative.

    DevTool

    npm install --save-dev @redux-devtools/cli

    "scripts": { "redux-devtools": "redux-devtools --open=electron --hostname=localhost --port=8000" }

    Enable remote in store (simple version)

    import { createStore } from 'redux';
    import devToolsEnhancer from 'remote-redux-devtools';
    const store = createStore(reducer, devToolsEnhancer());
    

    For advanced version, check https://github.com/zalmoxisus/remote-redux-devtools

    Feedback for maintainers - please consider updating:

    1. Please remove "connect via remotedev.io" as it looks like it hasn't been maintained in a very long time, as a matter of fact, click on "http://zalmoxisus.github.io/monitoring/" which is displayed on remote-redux-devtools homepage (or) "http://remotedev.io/local" which is displayed under heading Monitoring has some human-test, and then loads INAPPROPRIATE CONTENT.

    2. Update link in main redux-devtools repo, where it mentions "...a standalone app..." to the @redux-devtools/cli page (instead of the current link that take to an outdated monitor app)

    image

    1. In the @redux-devtools/cli mono repo sub-page, consider removing "RemoteDev", and include details from the "Remote Monitoring" docs from the main redux-devtools page

    image

    opened by akkayy 0
  • While Running the reactDev tools getting error as SocketProtocolError message:

    While Running the reactDev tools getting error as SocketProtocolError message: "Client connection establishment timed out", code: 4007.

    I am facing an issue while trying to debug the Application with ReactDev Tools, showing errors on the console as

    SocketProtocolError {name: "SocketProtocolError", message: "Client connection establishment timed out", code: 4007, stack: "SocketProtocolError: Client connection establishme…y=false&runModule=true&app=org.name.tflrn:5244:17"}.

    remote-redux-dev tools: Socket connection errors are being suppressed. This can be disabled by setting suppressConnectErrors to 'false'.

    below is the ref Store Configurations.

    `import { createStore, applyMiddleware, compose } from "redux"; import { composeWithDevTools } from 'remote-redux-devtools'; import thunk from "redux-thunk"; import rootReducer from "./reducer/index";

    export const middleware = [thunk];

    const store = createStore( rootReducer, initialState, composeWithDevTools(applyMiddleware(...middleware)) );`

    ReactNative Version : 0.64.1

    image

    opened by snevula123456 1
  • remotedev.io is down

    remotedev.io is down

    Hello, remotedev.io is down again... Also I have tried to use remotedev-server but during the installation I have encountered this error. Screenshot 2021-07-19 at 14 17 52 It seems that I can not get some sqlLite3 package from the s3 server.

    opened by TheSp00k 0
  • Please bump version of remote socketcluster-client

    Please bump version of remote socketcluster-client

    Current version of socketcluster-client has a hardcoded version of ws dependency that breaks our code. It would be cool if we can move it to a later version where they have started using ranges for their vs dependency version (it is definitely in the latest version on NPM).

    opened by smokiyeno-wix 0
  • update redux-devtools-instrument

    update redux-devtools-instrument

    redux-devtools-instrument updates symbol-observable https://github.com/reduxjs/redux-devtools/pull/660

    opened by EtDu 0
  • typo bellow => below

    typo bellow => below

    opened by skerche88 0
  • composeWithDevTools

    composeWithDevTools

    opened by JUULShawn 0
  • typo bellow => below

    typo bellow => below

    opened by yanick 0
  • Doesn't display item: f functionName

    Doesn't display item: f functionName

    On storing a function, I can verify the store is fine by calling the function or inspecting store in console.

    However, according to devtools, the key doesn't even exist (presumably it causes an error or evaluates to undefined)

    reducer:
            stateAppSetFnVerifyCredentials: {
                reducer(state, action) {
                    state.fnVerifyCredentials = action.payload.fn;
                    state.fnVerifyCredentialsString = action.payload.fnString;
                }
            }
            ....
    
    const fnPointer = fnSubmitCredentials.bind(this);
    this.props.stateAppSetFnVerifyCredentials({fn: fnPointer, fnString: fnPointer.toString()});
    

    e.g. raw shows this, i.e. fnString and fn are stored (verified) but fn just doesn't show.

    {
    ...
        fnVerifyCredentialsString: 'function () { [native code] }'
    ...
    }
    

    It doesn't in the action panel either, in fact until I added fnString, action just showed type, not even a payload key.

    Action panel:

    {
      type: 'app/stateAppSetFnVerifyCredentials',
      payload: {
        fnString: 'function () { [native code] }'
      }
    }
    

    Suggest it should show it as f fnVerifyCredentials like console would.

    opened by troywray 0
Releases(v0.5.0)
  • v0.5.0(Oct 6, 2016)

    Pausing and locking features

    Read the post for details about why and how to use them.

    pausing

    Added composeWithDevtools method

    Instead of

    import { createStore, applyMiddleware, compose } from 'redux';
    import devToolsEnhancer from 'remote-redux-devtools';
    
    const store = createStore(reducer, /* preloadedState, */ compose(
        applyMiddleware(...middleware),
        devToolsEnhancer()
    ));
    

    Now you should use:

      import { createStore, applyMiddleware } from 'redux';
      import { composeWithDevTools } from 'remote-redux-devtools';
    
      const store = createStore(reducer, /* preloadedState, */ composeWithDevTools(
        applyMiddleware(...middleware),
        // other store enhancers if any
      ));
    

    or with parameters:

      import { createStore, applyMiddleware } from 'redux';
      import { composeWithDevTools } from 'remote-redux-devtools';
    
      const composeEnhancers = composeWithDevTools({ realtime: true, port: 8000 });
      const store = composeWithDevTools(reducer, /* preloadedState, */ composeEnhancers(
        applyMiddleware(...middleware),
        // other store enhancers if any
      ));
    

    As the result DevTools.updateStore is deprecated.

    New options

    • shouldRecordChanges (boolean) - if specified as false, it will not record the changes till clicking on Start recording button. Default is true.
    • pauseActionType (string) - if specified, whenever clicking on Pause recording button and there are actions in the history log, will add this action type. If not specified, will commit when paused. Default is @@PAUSED.
    • shouldStartLocked (boolean) - if specified as true, it will not allow any non-monitor actions to be dispatched till clicking on Unlock changes button. Default is false.
    • shouldHotReload boolean - if set to false, will not recompute the states on hot reloading (or on replacing the reducers). Default to true.
    Source code(tar.gz)
    Source code(zip)
  • v0.4.9(Sep 24, 2016)

  • v0.4.8(Sep 11, 2016)

  • v0.4.7(Aug 31, 2016)

    New options to sanitize states and actions:

    • stateSanitizer - function which takes state object and index as arguments, and should return state object back.
    • actionSanitizer - function which takes action object and id number as arguments, and should return action object back.

    Example of usage:

    export default function configureStore(initialState) {
      // Note: passing enhancer as last argument requires [email protected]>=3.1.0
      const store = createStore(
        rootReducer,
        initialState,
        devTools({
          actionSanitizer: (action) => (
           action.type === 'FILE_DOWNLOAD_SUCCESS' && action.data ?
           { ...action, data: '<<LONG_BLOB>>' } : action
          ),
          stateSanitizer: (state) => state.data ? { ...state, data: '<<LONG_BLOB>>' } : state
        })
      );
      return store;
    }
    

    Downgraded socketcluster-client to fix Windows issues.

    Source code(tar.gz)
    Source code(zip)
  • v0.4.1(Aug 4, 2016)

    Added updateStore method, which you can use in case you have other enhancer / middlewares. So, when remote dispatching, they will be applied.

    Usage:

    import { createStore, applyMiddleware, compose } from 'redux';
    import thunk from 'redux-thunk';
    import devTools from 'remote-redux-devtools';
    import reducer from '../reducers';
    
    export default function configureStore(initialState) {
      const enhancer = compose(
        applyMiddleware(thunk),
        devTools()
      );
      // Note: passing enhancer as last argument requires [email protected]>=3.1.0
      const store = createStore(reducer, initialState, enhancer);
      // If you have other enhancers & middlewares
      // update the store after creating / changing to allow devTools to use them
      devTools.updateStore(store);
      return store;
    }
    
    Source code(tar.gz)
    Source code(zip)
  • v0.4.0(Aug 1, 2016)

  • v0.3.4(Jul 20, 2016)

  • v0.3.3(May 21, 2016)

    Catch and send exceptions occurred in the application

    Added sendOnError parameter, which can be set to:

    • 1: catch all exceptions from the application by binding to console.error, using window.onerror for browser and ErrorUtils for React Native, and send a @@remotedev/ERROR action with all the details.
    • 2: catch only exceptions from reducers.

    Will send logs even when realtime is set to false, but with post requests in this case without opening a connection.

    Source code(tar.gz)
    Source code(zip)
  • v0.3.2(May 4, 2016)

  • v0.3.1(May 2, 2016)

    Send data to the remote monitor with post requests (without opening a socket connection)

    Check the demo here

    The configuration will be like:

    export default function configureStore(initialState) {
     return createStore(
        rootReducer,
        initialState,
        devTools({
          name: 'Android app', realtime: false,
          hostname: 'your-host.com', port: 8000,
          sendOn: 'SOME_ACTION_ERROR' // or array: ['LOGIN_ERROR', 'LOGOUT_ERROR']
          })
      );
    }
    

    Requires [email protected]^0.0.9.

    Support secure connections

    Added secure parameter, specifies whether to use https protocol for post requests and wss for socket connections. Requires [email protected]^0.0.8.

    Source code(tar.gz)
    Source code(zip)
  • v0.3.0(Apr 27, 2016)

    Remote monitoring in production

    Use Remote Redux DevTools to monitor your web, React Native or hybrid apps not only in development, but also in production now!

    Start or stop monitoring by using specific actions (for example SOME_ACTION_ERROR).

    Check the demo here

    It implies that for production you'll host remotedev-server on your side.

    The configuration will be like:

    export default function configureStore(initialState) {
     return createStore(
        rootReducer,
        initialState,
        devTools({
          name: 'Android app', realtime: false,
          hostname: 'your-host.com', port: 8000,
          startOn: 'SOME_ACTION_ERROR' // or array: ['LOGIN_ERROR', 'LOGOUT_ERROR']
          })
      );
    }
    

    For development

    If you have process.env.NODE_ENV === 'development', just use devTools() as before and all the changes will be monitored. Otherwise set realtime option to true (devTools({ realtime: true })), but make sure to have it in the development only.

    Source code(tar.gz)
    Source code(zip)
  • v0.2.2(Apr 22, 2016)

  • v0.2.1(Apr 22, 2016)

  • v0.2.0(Apr 20, 2016)

  • v0.1.8(Apr 19, 2016)

  • v0.1.7(Apr 19, 2016)

    • Don't install react anymore, using redux-devtools-instrument. Fix naming collisions like in #11.
    • Implement maxAge option. Limit number of maximum allowed actions to be stored on the history tree by default to 30.
    Source code(tar.gz)
    Source code(zip)
  • v0.1.6(Apr 16, 2016)

  • v0.1.5(Mar 11, 2016)

  • v0.1.4(Mar 2, 2016)

    • Add optional filters to reduce noise (#12).
    • Just warn when socket is not available instead of showing errors, not to be caught inside the app.
    Source code(tar.gz)
    Source code(zip)
  • v0.1.2(Feb 8, 2016)

    • Set default hostname if port is set.
    • Remove direct redux dependency and encourage to use new redux API.
    • Update dependencies to fix some issues in socketcluster and redux-devtools.
    Source code(tar.gz)
    Source code(zip)
  • v0.1.1(Feb 1, 2016)

    • Fix unhandled exceptions displaying the react native red exception screen (#8).
    • Update socketcluster-client to fix the reconnecting issue.
    • Use store.subscribe instead of reducers.
    Source code(tar.gz)
    Source code(zip)
  • v0.1.0(Jan 24, 2016)

  • v0.0.9(Jan 20, 2016)

    • The instance can be identified in the app monitor by providing name prop.
    • Sync the instance to have the same states as the other one (if required by the app).
    • Don't miss INIT action.
    Source code(tar.gz)
    Source code(zip)
  • v0.0.8(Jan 16, 2016)

  • v0.0.7(Jan 15, 2016)

  • v0.0.6(Jan 10, 2016)

  • v0.0.5(Jan 9, 2016)

  • v0.0.4(Jan 9, 2016)

DevTools for Redux with hot reloading, action replay, and customizable UI

Redux DevTools Developer Tools to power-up Redux development workflow or any other architecture which handles the state change (see integrations). It

Redux 12.2k Nov 23, 2021
A resizable and movable dock for Redux DevTools monitors

Redux DevTools Dock Monitor A resizable and movable dock for Redux DevTools. Powered by React Dock. Installation npm install --save-dev redux-devtools

Dan Abramov 401 Nov 11, 2021
Filterable tree view monitor for Redux DevTools

========================= Filterable tree view monitor for Redux DevTools. Actions are collapsed by default but they can be expanded by clicking on th

Brian Vaughn 151 May 7, 2021
Another Redux DevTools Monitor

redux-devtools-inspector This package was merged into redux-devtools monorepo. Please refer to that repository for the latest updates, issues and pull

Alexander Kuznetsov 241 Aug 10, 2021
The default monitor for Redux DevTools with a tree view

Redux DevTools Log Monitor The default monitor for Redux DevTools with a tree view. It shows a log of states and actions, and lets you change their hi

Dan Abramov 310 Sep 17, 2021
DevTools for Redux with hot reloading, action replay, and customizable UI

Redux DevTools Developer Tools to power-up Redux development workflow or any other architecture which handles the state change (see integrations). It

Redux 12.2k Nov 24, 2021
Skeleton React App configured with Redux store along with redux-thunk, redux persist and form validation using formik and yup

Getting Started with React-Redux App Some Configrations Needed You guys need to modify the baseUrl (path to your server) in the server.js file that is

Usama Sarfraz 10 Aug 23, 2021
A Higher Order Component using react-redux to keep form state in a Redux store

redux-form You build great forms, but do you know HOW users use your forms? Find out with Form Nerd! Professional analytics from the creator of Redux

Redux Form 12.6k Nov 23, 2021
redux-immutable is used to create an equivalent function of Redux combineReducers that works with Immutable.js state.

redux-immutable redux-immutable is used to create an equivalent function of Redux combineReducers that works with Immutable.js state. When Redux creat

Gajus Kuizinas 1.9k Nov 18, 2021
Official React bindings for Redux

React Redux Official React bindings for Redux. Performant and flexible. Installation Using Create React App The recommended way to start new apps with

Redux 21.6k Dec 2, 2021
Ruthlessly simple bindings to keep react-router and redux in sync

Project Deprecated This project is no longer maintained. For your Redux <-> Router syncing needs with React Router 4+, please see one of these librari

React Community 7.9k Nov 25, 2021
The official, opinionated, batteries-included toolset for efficient Redux development

Redux Toolkit The official, opinionated, batteries-included toolset for efficient Redux development (Formerly known as "Redux Starter Kit") Installati

Redux 6.8k Dec 2, 2021
Thunk middleware for Redux

Redux Thunk Thunk middleware for Redux. npm install redux-thunk yarn add redux-thunk Note on 2.x Update Most tutorials today assume that you're using

Redux 16.8k Nov 24, 2021
Logger for Redux

Logger for Redux Now maintained by LogRocket! LogRocket is a production Redux logging tool that lets you replay problems as if they happened in your o

null 5.6k Nov 21, 2021
Selector library for Redux

Reselect Simple “selector” library for Redux (and others) inspired by getters in NuclearJS, subscriptions in re-frame and this proposal from speedskat

Redux 18.4k Nov 26, 2021
An alternative side effect model for Redux apps

redux-saga redux-saga is a library that aims to make application side effects (i.e. asynchronous things like data fetching and impure things like acce

Redux-Saga 21.9k Nov 24, 2021
Declarative Side Effects for Redux

Redux Data FX Declarative Side Effects for Redux. It helps you keep your business logic and effectful code separate. The idea is simple: in addition o

Matthieu Béteille 53 Jun 30, 2021
RxJS middleware for action side effects in Redux using "Epics"

RxJS-based middleware for Redux. Compose and cancel async actions to create side effects and more. https://redux-observable.js.org Install This has pe

redux-observable 7.8k Nov 29, 2021
Analytics middleware for Redux

redux-analytics Analytics middleware for Redux. $ npm install --save redux-analytics Want to customise your metadata further? Check out redux-tap. Usa

Mark Dalgleish 491 Nov 12, 2021