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;
}
Comments
  • 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
  • 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
  • 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
  • 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
  • does redux-immutable expect reducers to be part of the state?

    does redux-immutable expect reducers to be part of the state?

    If I pass an initialState like so createStore(combineReducers({reducer1, reducer2}), initialState), I get:

    Unexpected properties .... found in previous state received by the reducer. Expected to find one of the known reducer property names instead 'reducer1', 'reducer2'

    When I look at my state which is defined as Immutable.Map, I see reducer1 and reducer2 keys at the roots. Does redux-immutable reconstruct state by creating root keys using the reducer names?

    question 
    opened by adasfan 5
  • initialState rootReducer, serialise/ desialise state maintaining types

    initialState rootReducer, serialise/ desialise state maintaining types

    Let's say I have a reducer with initialState:

    myReducer

    Immutable.fromJS({
      uniqueTodos: Immutable.Set([ 'one', 'two' ])
    });
    

    Then time to save to local store:

    const storeSaveObj = store.getState().toJS();
    saveToLocalStorage(JSON.stringify(storeSaveObj));
    

    Then to restore it:

    import { getStateFromLocalStorage } from './utils'; 
    import { immutableRootReducer } from './rootReducer';
    import { createStore } from 'redux';
    
    const initialState = Immutable.fromJS(getStateFromLocalStorage());
    const store = createStore(immutableRootReducer, initialState);
    

    Then the reducer has been restored, but as a Immutable.List because of Immutable.fromJS:

    const uniqueTodos = store.getState().getIn([ 'myReducer', 'uniqueTodos' ]);
    Immutable.List.isList(uniqueTodos);
    true
    Immutable.Set.isSet(uniqueTodos);
    false
    

    Is there a good solution to retain the immutable types somehow?

    help wanted documentation 
    opened by beckend 5
  • 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
  • nested combineReducers

    nested combineReducers

    I'm having some trouble getting this library to work with my existing redux reducers. I believe the problem is that I am nesting multiple combineReducers calls in my root reducer.

    So for a simplified example I have the following files:

    // root-reducer.js
    import { combineReducers } from 'redux-immutable';
    import complexReducer from './complex-reducer';
    export default combineReducers({
      complexReducer
    });
    
    // complex-reducer.js
    import { combineReducers } from 'redux-immutable';
    import reducerA from './reducer-a';
    import reducerB from './reducer-b';
    import reducerC from './reducer-c';
    
    export default combineReducers({
      reducerA,
      reducerB,
      reducerC
    });
    

    When it tries to set the initial state of the complex reducer, it is passed in an undefined value from the root reducer and gives this error:

    The previous state received by the reducer is of unexpected type. Expected argument to be an instance of Immutable.Iterable with the following properties: "reducerA", "reducerB", "reducerC".
    

    and then fails on the withMutations call here because inputState is undefined.

    This pattern is supported by redux (see https://github.com/reactjs/redux/issues/738). Is this possible in redux-immutable? Sorry if I am missing something obvious - am fairly new to the redux ecosystem.

    enhancement 
    opened by mathisonian 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 10
  • 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 14
  • 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
Releases(v4.0.0)
Owner
Gajus Kuizinas
Software architect. Passionate about JavaScript, React, GraphQL, Redux. Active open-source contributor.
Gajus Kuizinas
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 Oct 2, 2022
A lightweight state management library for react inspired by redux and react-redux

A lightweight state management library for react inspired by redux and react-redux

null 2 Sep 9, 2022
Redux - Create forms using Redux And React

Exercício de fixação Vamos criar formulários utilizando Redux! \o/ Antes de inic

Márcio Júnior 2 Jul 21, 2022
: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.8k Sep 24, 2022
In this course you learn how to use Redux as a state manager in your React applications

Redux is a state manager which you can use it in your React, Vue and even Vanilla applications. In this course we store Redux storage in localstorage to keep our data.

AmirHossein Mohammadi 5 Jul 25, 2022
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 24 Oct 2, 2022
A quick start Redux + TypeScript Create React App template

A quick start Redux + TypeScript Create React App template An opinionated quick

null 0 Dec 24, 2021
Financial Metrics - about building a mobile web application to check a list of metrics that I create making use of React and Redux

Financial Metrics is about building a mobile web application to check a list of metrics (numeric values) that I create making use of React and Redux

Amrendra K 9 Jun 4, 2022
A light-weight state manager.

Rectx a light-weight state manager with mutable api. 安装 npm install --save rectx 又一个轮子? Redux 和 Mobx 都非常的棒,但对于大部分项目都只是 CRUD 的项目来说,这些个玩意儿都略显太重了。而且对于 re

ZhengFang 176 May 21, 2022
Dead simple state management for React

Undux & TypeScript TodoMVC Example TodoMVC for Undux Installation git clone [email protected]:bcherny/undux-todomvc.git cd undux-todomvc npm install npm

Boris Cherny 11 Aug 10, 2020
Manage the state of your React app with ease

@spyna/react-store React app state management that uses a storage Demo https://spyna.github.io/react-store/ Install npm install --save @spyna/react-st

Lorenzo Spinelli 46 Jan 19, 2021
Redux Tutorial - share my experience regarding redux, react-redux and redux-toolkit

Redux Tutorial 1. Introduction to Redux 1.1 What is Redux & why Redux? A small JS Library for managing medium/large amount of states globally in your

Anisul Islam 29 Sep 29, 2022
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
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 11 Jul 10, 2022
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 294 Aug 13, 2022
A simple app for study react with redux, redux saga and typescript.

React com Redux, Redux-Saga e TypeScript. ?? Uma aplicação simple para entender o funcionamento do Redux e a melhor maneira de utiliza-lo junto com o

João Marcos Belanga 1 May 24, 2022
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 22.4k Oct 4, 2022
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 13.1k Oct 1, 2022