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

Overview

redux-immutable

GitSpo Mentions Travis build status NPM version Canonical Code Style

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

When Redux createStore reducer is created using redux-immutable then initialState must be an instance of Immutable.Collection.

Problem

When createStore is invoked with initialState that is an instance of Immutable.Collection further invocation of reducer will produce an error:

The initialState argument passed to createStore has unexpected type of "Object". Expected argument to be an object with the following keys: "data"

This is because Redux combineReducers treats state object as a plain JavaScript object.

combineReducers created using redux-immutable uses Immutable.js API to iterate the state.

Usage

Create a store with initialState set to an instance of Immutable.Collection:

import {
  combineReducers
} from 'redux-immutable';

import {
  createStore
} from 'redux';

const initialState = Immutable.Map();
const rootReducer = combineReducers({});
const store = createStore(rootReducer, initialState);

By default, if state is undefined, rootReducer(state, action) is called with state = Immutable.Map(). A different default function can be provided as the second parameter to combineReducers(reducers, getDefaultState), for example:

const StateRecord = Immutable.Record({
	foo: 'bar'
});
const rootReducer = combineReducers({foo: fooReducer}, StateRecord);
// rootReducer now has signature of rootReducer(state = StateRecord(), action)
// state now must always have 'foo' property with 'bar' as its default value

When using Immutable.Record it is possible to delegate default values to child reducers:

const StateRecord = Immutable.Record({
	foo: undefined
});
const rootReducer = combineReducers({foo: fooReducer}, StateRecord);
// state now must always have 'foo' property with its default value returned from fooReducer(undefined, action)

In general, getDefaultState function must return an instance of Immutable.Record or Immutable.Collection that implements get, set and withMutations methods. Such collections are List, Map and OrderedMap.

Using with react-router-redux v4 and under

react-router-redux routeReducer does not work with Immutable.js. You need to use a custom reducer:

import Immutable from 'immutable';
import {
  LOCATION_CHANGE
} from 'react-router-redux';

const initialState = Immutable.fromJS({
  locationBeforeTransitions: null
});

export default (state = initialState, action) => {
  if (action.type === LOCATION_CHANGE) {
    return state.set('locationBeforeTransitions', action.payload);
  }

  return state;
};

Pass a selector to access the payload state and convert it to a JavaScript object via the selectLocationState option on syncHistoryWithStore:

import {
  browserHistory
} from 'react-router';
import {
  syncHistoryWithStore
} from 'react-router-redux';

const history = syncHistoryWithStore(browserHistory, store, {
  selectLocationState (state) {
      return state.get('routing').toJS();
  }
});

The 'routing' path depends on the rootReducer definition. This example assumes that routeReducer is made available under routing property of the rootReducer.

Using with react-router-redux v5

To make react-router-redux v5 work with Immutable.js you only need to use a custom reducer:

import {
  Map
} from 'immutable';
import {
  LOCATION_CHANGE
} from 'react-router-redux';

const initialState = Map({
  location: null,
  action: null
});

export function routerReducer(state = initialState, {type, payload = {}} = {}) {
  if (type === LOCATION_CHANGE) {
    const location = payload.location || payload;
    const action = payload.action;

    return state
      .set('location', location)
      .set('action', action);
  }

  return state;
}
Issues
  • set-up help

    set-up help

    Hey there, just trying to convert a current app to deal with immutable state and running into some troubles. The state my components are receiving are still in the Immutable.js form.

    Map {size: 9, _root: BitmapIndexedNode, __ownerID: undefined, __hash: undefined, __altered: false}
    

    Any help will be great as I cant seem to figure out where exactly im going wrong although I think its the way im orgainsing configureStore.js below. (I've taken the majority of the app out for simplicity)

    thanks

    reducer.js:

    import { REHYDRATE } from 'redux-persist/constants';
    import Immutable from 'immutable';
    
    const initialState = Immutable.Map({
      rehydrated: false,
      isLoggedIn: false
    });
    
    const Login = (state = initialState, action) => {
      switch (action.type) {
      case REHYDRATE:
        const incoming = action.payload;
        if (incoming.reducers) {
          return state.merge(incoming.reducers.login).set('rehydrated', true);
        }
        return state.set('rehydrated', true);
      case 'AUTHORISE_SUCCESS':
        return state.set('isLoggedIn', true);
      case 'AUTHORISE_FAILURE':
        return state.set('isLoggedIn', false);
      case 'LOGOUT_SUCCESS':
        return state.set('isLoggedIn', false);
      default:
        return state;
      }
    };
    
    export default Login;
    

    combineReducers.js:

    import { combineReducers } from 'redux-immutable';
    
    import login from './login';
    import routing from './routing';
    
    const rootReducer = combineReducers({
      login,
      routing
    });
    
    export default rootReducer;
    

    configureStore.js:

    import thunkMiddleware from 'redux-thunk';
    import { autoRehydrate } from 'redux-persist';
    import { routerMiddleware } from 'react-router-redux';
    import rootReducer from '../reducers/index';
    import { createStore, applyMiddleware, compose } from 'redux';
    import Immutable from 'immutable';
    
    
    const initialState = Immutable.Map();
    
    export default function configureStore(browserHistory) {
      return createStore(
        rootReducer,
        initialState,
        compose(
          autoRehydrate(),
          applyMiddleware(thunkMiddleware, routerMiddleware(browserHistory))
        )
      );
    }
    
    export default configureStore;
    

    index.js:

    import * as React from 'react';
    import ReactDOM from 'react-dom';
    import { Provider } from 'react-redux';
    import { syncHistoryWithStore } from 'react-router-redux';
    import { Router, Route, browserHistory } from 'react-router';
    
    import AuthCheckHOC from './components/AuthCheckHOC';
    import PersisterHOC from './components/PersisterHOC';
    import Container from './containers/Container';
    import Auth from './containers/Auth';
    
    import configureStore from './store/configureStore';
    
    const store = configureStore(browserHistory);
    const history = syncHistoryWithStore(browserHistory, store, {
      selectLocationState(state) {
        return state.get('routing').toJS();
      }
    });
    ReactDOM.render(
      <Provider store={store}>
        <Router history={history}>
          {/*'/signin' route needs to be outside PersisterHOC and AuthCheckHOC*/}
          <Route path="/signin" component={Auth} />
          <Route component={PersisterHOC(AuthCheckHOC(Container), store)}>
          </Route>
        </Router>
      </Provider>,
      document.getElementById('react-content')
    );
    
    
    question 
    opened by Jbarget 12
  • Action validator throws on an action without a 'name' property (like the ones dispatched by the 'redux-devtools')

    Action validator throws on an action without a 'name' property (like the ones dispatched by the 'redux-devtools')

    The "Canonical Reducer Composition" validator checks every action object and throws if a name property is missing. But redux uses another convention – it uses type, not name, so no action object has a proper name in it by default.

    The core @@redux/INIT action is worked around and ignored in redux-immutable, but the redux-devtools use another action called @@INIT which isn't.

    I'm not sure if this is an issue of redux-immutable or the redux itself, but hopefully you guys will figure it out. CC @gajus @gaearon

    For now I'm willing to uninstall redux-immutable rather than redux-devtools (until the issue is fixed somehow).

    help wanted 
    opened by sompylasar 10
  • Redux 3.0.0 requires type property to be present in actions

    Redux 3.0.0 requires type property to be present in actions

    Since redux 3.0.0 action creators require the 'type' property not to be undefined, i've played around with it and just added it with the same value as the 'name' property to get rid of the error.

    The error thrown: Uncaught Error: Actions may not have an undefined "type" property. Have you misspelled a constant?

    enhancement 
    opened by maikdiepenbroek 10
  • Immutable v4 compatibility

    Immutable v4 compatibility

    Closes #46

    Also I would like to propose separating immutable dependency into peerDependencies and devDependencies:

    "peerDependencies": {
      "immutable": "^3.8.1 || ^4.0.0-rc.1"
    },
    "devDependencies": {
      "immutable": "^3.8.1 || ^4.0.0-rc.1"
    }
    

    That way if a user's project at large uses [email protected]^4, redux-immutable won't try to pull in [email protected] as a local dependency, but rather import from the project. Avoids bloating up bundle size.

    Conditional devDependencies avoids npm warnings when switching between immutable versions in development. 3.8.1 is installed by default.

    opened by Velenir 9
  • redux-immutable and redux 3 initial state

    redux-immutable and redux 3 initial state

    Sounds like the redux-immutable library is not needed when working with redux 3 and above. But I was wondering if a function such as the one below would still be needed to combine the reducers into one immutable map?

    export const combineReducers = (reducers) => {
      return (state = Immutable.Map(), action) => {
        return Object.keys(reducers).reduce((nextState, key) => {
          return nextState.set(key, reducers[key](state.get(key), action));
        }, state);
      };
    };
    
    bug 
    opened by vishcious 8
  • About initialState

    About initialState

    I am wondering why redux-immutable has no default state. https://github.com/gajus/redux-immutable/blob/ac78103fc6939ef24c713f5a765f1b7187b9891c/src/combineReducers.js#L13

    Redux combineReducers has a default value. https://github.com/reactjs/redux/blob/6870b826b6b1bea7e7aec67a4ed88d139bd382cd/src/combineReducers.js#L111

    I tried to nest redux-immutable combineReducers but it throws Cannot read property 'withMutations' of undefined because I did not specify the nested property in my global initialState Object.

    Shouldn't it work without specifying the initialState.

    opened by namjul 7
  • React-router <Link> does not work

    React-router does not work

    I am using this package with react-redux-router. While manually changing the URL in my browser does follow my routes and take me to the correct page, if I try to use the <Link> component provided by react-router (or even use the push action creator from react-redux-router) nothing happens. A link gets created and I can inspect and see it has the correct href, but clicking on it does nothing.

    I believe this is probably an issue with the history not syncing correctly with the store, but I feel like I am following the documentation correctly. Has anyone else been successful in using that component with this package? Not sure if I'm doing something wrong or if this is a real bug.

    react v0.14.8 react-router v2.3.0 react-router-redux v4.0.2 redux-immutable v3.0.6

    I am adding the LOCATION_CHANGE reducer. Note that while I call it routing here, I have also called it route and routes to no avail.

    reducers.js

    import Immutable from 'immutable';
    import { LOCATION_CHANGE } from 'react-router-redux';
    
    const initialState = Immutable.fromJS({
        location: {}
    });
    
    export function routing(state = initialState, action) {
        if (action.type === LOCATION_CHANGE) {
            return state.merge({
                location: action.payload
            })
        }
    
        return state
    }
    

    I have a custom store configuration file where I add combineReducers from this package.

    configureStore.js

    import { createStore, applyMiddleware } from 'redux'
    import promiseMiddleware from './middleware/promise-middleware'
    import { routing } from './reducers'
    import { combineReducers } from 'redux-immutable'
    
    export default function(data) {
      const reducer = combineReducers({
        routing: routing
      })
    
      const store = createStore(
        reducer,
        applyMiddleware(promiseMiddleware)
      )
    
      return store
    }
    

    Then I add this store, sync it with the router history, and add it to my app wrapper (that gets loaded into the DOM). This is where I suspect the problems are coming in. Once again, while I call the piece of state routing here, I have also tried route and routes.

    app.js

    import React from 'react'
    import { Component } from 'react'
    import { Provider } from 'react-redux'
    import { Router, useRouterHistory } from 'react-router'
    import { syncHistoryWithStore } from 'react-router-redux'
    import { createHistory, useBasename  } from 'history'
    import createBrowserHistory from 'history/lib/createBrowserHistory'
    import makeRoutes from '../routes'
    import createStore from '../configureStore'
    import Immutable from 'immutable'
    
    const browserHistory = useRouterHistory(createBrowserHistory)({
      basename: '/baseurl'
    })
    const store = createStore()
    const history = syncHistoryWithStore(browserHistory, store, {
      selectLocationState: (state) => {
        return state.getIn(['routing', 'location']).toJS()
      },
    })
    const routes = makeRoutes(store)
    
    class App extends Component {
      render() {
        return (
          <Provider store={store}>
            <Router history={history} routes={routes} />
          </Provider>
        )
      }
    }
    
    export default App
    

    Any thoughts on why the <Link> component wouldn't be working with a setup like this?

    help wanted 
    opened by andynoelker 6
  • please offer a browser built version

    please offer a browser built version

    you should include a browser built file in your dist directory with an umd format, thanks

    wontfix 
    opened by lovetingyuan 6
  • react-router getComponent func run store.replaceReducer() dead to

    react-router getComponent func run store.replaceReducer() dead to

    immutable.js:1430 Uncaught RangeError: Maximum call stack size exceeded => infinite loop

    question 
    opened by lileilei 6
  • Uncaught TypeError: reducer is not a function

    Uncaught TypeError: reducer is not a function

    Hey guys, Thanks for an awesome repo, I updated to the latest version and ran into this error,

    Uncaught TypeError: reducer is not a function at combineReducers.js:51 ( using Webpack )

    My code:

    var state = Immutable.Map({});
    
    var itemsReducer = {
    
        items: {
    
            CONSTRUCT () {
                return Immutable.Map([
                    {
                        id: 1,
                        name: 'foo',
                        done: true
                    },
                    {
                        id: 2,
                        name: 'bar',
                        done: false
                    },
                    {
                        id: 3,
                        name: 'baz',
                        done: false
                    }
                ])
            },
    
            ADD_ITEM (domain, action) {
                return domain
                    .push(Immutable.Map({
                        id: 1,
                        name: 'test',
                        done: false
                    }));
            }
        }
    };
    
    var reducer = combineReducers({
        items: itemsReducer
    });
    
    

    Only happens with the latest version, Am I missing something?

    invalid 
    opened by ghost 5
  • Wrong return type of combineReducers

    Wrong return type of combineReducers

    Hello,

    I am using redux-immutable with TypeScript and found this issue.

    The combineReducer (provided by redux-immutable) returns a plain object instead of Immutable.Collection.

    Such typing force me to do state.sidebar instead of state.get('sidebar') in mapStateToProps.

    const mapStateToProps = (state: StateType<typeof rootReducer>) => ({
      sidebar: state.get('sidebar'), // <- this is correct example of usage
    })
    
    Screen Shot 2019-05-04 at 4 51 19 AM Screen Shot 2019-05-04 at 2 07 41 PM question 
    opened by enheit 9
  • bump dependancy to rc9

    bump dependancy to rc9

    We are using without error immutable-rc9

    Should we bump the peer dependancy

    "immutable": "^3.8.1 || ^4.0.0-rc.1",

    "immutable": "^3.8.1 || ^4.0.0-rc.9",

    opened by andrewmclagan 1
  • How to add non immutable store when combining reducers

    How to add non immutable store when combining reducers

    Hi, thanks for redux-immutable.

    I am trying to mix immutable reducer and classic reducer.

    I have tried to tweak the combineReducer.js like this :

        if (inputState.withMutations) {
          return inputState.withMutations(function (temporaryState) {
            reducerKeys.forEach(function (reducerName) {
              var reducer = reducers[reducerName];
              var currentDomainState = temporaryState.get(reducerName);
              var nextDomainState = reducer(currentDomainState, action);
    
              (0, _utilities.validateNextState)(nextDomainState, reducerName, action);
    
              temporaryState.set(reducerName, nextDomainState);
            });
          });
        } else {
          reducerKeys.forEach(function (reducerName) {
            var reducer = reducers[reducerName];
            var currentDomainState = inputState[reducerName];
            var nextDomainState = reducer(currentDomainState, action);
    
            (0, _utilities.validateNextState)(nextDomainState, reducerName, action);
    
            inputState[reducerName] = nextDomainState;
          });
          return inputState;
        }
    

    And mix my reducer like this

    import { combineReducers } from 'redux';
    import { combineReducers as combineReducersImmutable } from 'redux-immutable';
    
    export default function createReducer(injectedReducers) {
      const immutableReducer = combineReducersImmutable({
        route: routeReducer,
        locale: localeReducer(),
        form: formReducer,
        ...injectedReducers,
      });
      const nonmutableReducer = combineReducers({
        admin: adminReducer,
      });
      return combineReducersImmutable({
        admin: adminReducer,
        route: routeReducer,
        locale: localeReducer(),
        form: formReducer,
        ...injectedReducers,
      }, () => {
        return {
          ...immutableReducer(undefined, { type: '' }),
          ...nonmutableReducer(undefined, { type: '' })
        };
      })
    }
    

    But that doesn't work very well. Any Idea how I could achieve this ?

    question 
    opened by kopax 12
  • Why can't I use Immutable.Record as initialState in rootReducer?

    Why can't I use Immutable.Record as initialState in rootReducer?

    As I can see in https://medium.com/@fastphrase/practical-guide-to-using-immutablejs-with-redux-and-react-c5fd9c99c6b2 It should be possible to use Record as initialValue, but using combineReducers I get an Error, if I use Immutable.Record instead of Immutable.Map in redux createStore . Please explain.

    I use redux-immutable's combineReducers and all my reducers now made with Immutable.Record. But as it is in example in redux-immutable github examples, store should be created with Immutable.Map as initialState.

    const initialState = Immutable.Map()
    const store = createStore(rootReducer, initialState)
    

    I tried to change it to

    const initialState = Immutable.Record()
    const store = createStore(rootReducer, initialState)
    

    But I'm getting errors from Immutable lib. Is there some workaround? It could be very helpful, if someone point me in the right direction.

    PS. "react-redux": "5.0.5"

    The main reason for the issue is API.

    Using Record as initialState allows to get data from state in connected components I can:

    export default connect(
      state => ({
        someProp: state.reducer.value
      })
    )(SomeComponent)
    

    With Map i can only get data:

    export default connect(
      state => ({
        someProp: state.getIn(['reducer', 'value'])
      })
    )(SomeComponent)
    
    question 
    opened by JustFly1984 6
  • Trying to make it work with redux-auth

    Trying to make it work with redux-auth

    Hi,

    This is not an issue but rather a question. I am trying to make redux-auth work with redux-immutable. There is an issue because redux-auth tries to access the "auth" part of the state through state.auth, which of course does not work.

    I would like to define a getter allowing access to auth via state.auth every time the state changes by doing:

    Object.defineProperty(
      store.getState(), 
      'auth', { 
          get: function() { return this.get('auth'); 
      } 
    });
    

    That would fix this known issue.

    Could you help me with that by telling me if it is possible or not? I guess it is not a great solution but I think it would help many people.

    Thanks in advance, Cheers

    question 
    opened by OriaLogic 0
  • State is undefined, can not get initial state

    State is undefined, can not get initial state

    Hi guys,

    i'm trying implement redux immutable in my project but i got stuck at connect mapStateToProps because the state returned from redux is Map object from ImmutableJS and i can not access user property also other properties in state by state.user or state.get('user') . So i posted my code here and need some advice from you guys, thanks in advance! Here is my code:

    folder: store/configureStore.js

    
    "use strict";
    
    import {applyMiddleware, createStore} from 'redux';
    import thunk from 'redux-thunk';
    var promise = require('./promise');
    var array = require('./array');
    import rootReducers from '../reducers';
    var createLogger = require('redux-logger');
    var {AsyncStorage} = require('react-native');
    import Immutable from 'immutable';
    
    var isDebuggingInChrome = __DEV__ && !!window.navigator.userAgent;
    const initialState = Immutable.Map({
        user: {
            isLoggedIn: false,
            username: null,
            session_id: null,
            name: null,
            uid: null
        }
    });
    
    var logger = createLogger({
      predicate: (getState, action) => isDebuggingInChrome,
      collapsed: true,
      duration: true,
    });
    
    var createCassiStore = applyMiddleware(thunk, promise, array, logger)(createStore)
    
    function configureStore(onComplete: ?()=> void) {
        const store = createCassiStore(rootReducers, initialState);
        if (isDebuggingInChrome) {
            window.store = store;
        }
        return store;
    }
    
    module.exports = configureStore;
    

    folder: reduders/user.js

    'use strict'
    
    import { createReducer } from 'redux-immutablejs'
    import { fromJS } from 'immutable'
    
    const initialState = fromJS({
        isLoggedIn: false,
        name: null,
        session_id: null,
        email: null,
        uid: null,
    })
    
    const user = createReducer(initialState, {
        'LOGGED_IN': (state, action) => state.merge({
            user: {
                isLoggedIn: true,
                ...action.data
            }
        })
    });
    
    module.exports = user
    
    

    folder reducers/index.js

    'use strict'
    
    import {combineReducers} from 'redux-immutablejs';
    import {reducer as formReducer} from 'redux-form/immutable';
    import {userReducer} from './user';
    
    export default combineReducers({
        form: formReducer,
        user: userReducer
    });
    
    

    folder components/MyNavigator.js

    import { connect } from 'react-redux';
    import React from 'react';
    class MyNavigator extends React.Component {
         render() {
            return (
                <Navigator
                    ref="navigator"
                    style={{ backgroundColor: '#fff', flex: 1 }}
                    initialRoute={{}}
                    renderScene={this.renderScene}
                />
            );
        }
    
        renderScene(route, navigator) {
            if(route.signup)
                return <SignUpScene navigator={navigator} />
            if(route.home)
                return <HomeScene navigator={navigator}/>
            return <LoginScene navigator={navigator} />
        }
    }
    const mapStateToProps = state => {
        return {
            isLoggedIn: state.user.isLoggedIn || false // error here cannot get user of undefined
        }
    }
    
    module.exports = connect(mapStateToProps)(MyNavigator);
    
    
    question 
    opened by nhuthuynh 2
  • Add build option for es modules

    Add build option for es modules

    Redux (and a lot of other React libs) have a ES2015 modules version of the build: https://github.com/reactjs/redux/blob/master/package.json#L24

    This is really handy for tools like Rollup, since the "module" key in package.json can be pointed at ./es/index.js. I'm using a fork of redux-immutable with these builds and it works well.

    Would you consider a PR that adds multiple build outputs to match how Redux is built?

    enhancement question 
    opened by nathancahill 11
  • Reducer is not a function (within state tree)

    Reducer is not a function (within state tree)

    Loving the ReduxImmutable library and using it's implementation of combineReducers for my root state without problem. However, I have a node off the state tree called forecast which I'd like to further separate into a set of reducers with the following:

    import ReduxImmutable from 'npm:redux-immutable';
    const { combineReducers } = ReduxImmutable;
    
    import meta from './forecast/meta';
    import history from './forecast/history';
    import versions from './forecast/versions';
    
    export default combineReducers({
      meta,
      history,
      versions
    });
    

    When I do this however, I get the message:

    reducer is not a function

    From the following code block:

    2017-03-15_12-27-02

    Any idea why this would be? For reference sake, here is the root reducer (which works so long as "forecast" is a regular reducer and not a combineReducer mutex):

    import ReduxImmutable from 'npm:redux-immutable';
    const { combineReducers } = ReduxImmutable;
    
    import accounts from './accounts';
    import counterparties from './counterparties';
    import firebase from './firebase';
    import forecast from './forecast';
    import org from './org';
    import registration from './registration';
    import users from './users';
    import userProfile from './userProfile';
    
    export default combineReducers({
      accounts,
      counterparties,
      firebase,
      forecast,
      org,
      registration,
      users,
      userProfile
    });
    
    opened by ksnyde 1
  • Remove sourcemap directives

    Remove sourcemap directives

    Thanks for creating and maintaining this package. Could you please remove sourcemap directives (//# sourceMappingURL=index.js.map) from compiled js files in dist directory. I'm using lots of packages in my project but only redux-immutable has these directives and it makes some minor but annoying problems with browserify.

    question 
    opened by sassanh 9
Releases(v4.0.0)
Owner
Gajus Kuizinas
Software architect. Passionate about JavaScript, React, GraphQL, Redux. Active open-source contributor.
Gajus Kuizinas
:recycle: higher order reducer to add undo/redo functionality to redux state containers

redux undo/redo simple undo/redo functionality for redux state containers Protip: Check out the todos-with-undo example or the redux-undo-boilerplate

Daniel Bugl 2.7k Nov 25, 2021
Helper to create less verbose action types for Redux

Action Typer Helper to create slightly less verbose redux action types. Uses ES6 Proxies! Highly Performant: Proxy is only run once at startup. Includ

Alister Norris 57 Nov 21, 2021
This command line helps you create components, pages and even redux implementation for your react project

react-help-create This command line helps you create components, pages and even redux implementation for your react project. How to install it? To ins

Omar 20 Nov 16, 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 sample project to create forms using React and Typescript

This project was bootstrapped with Create React App, using the Redux and Redux Toolkit template. Available Scripts In the project directory, you can r

null 1 Nov 19, 2021
A chart monitor for Redux DevTools https://www.npmjs.com/package/redux-devtools-chart-monitor

Redux DevTools Chart Monitor This package was merged into redux-devtools monorepo. Please refer to that repository for the latest updates, issues and

Redux 298 Nov 13, 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
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
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
Redux bindings for client-side search

redux-search Higher-order Redux library for searching collections of objects. Search algorithms powered by js-worker-search. Check out the live demo a

Brian Vaughn 1.4k Nov 17, 2021
A mock store for testing Redux async action creators and middleware.

redux-mock-store A mock store for testing Redux async action creators and middleware. The mock store will create an array of dispatched actions which

Redux 2.4k Nov 28, 2021