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')
);

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?

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).

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 immutable@^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.

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);
  };
};

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.

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?

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?

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?

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?

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.

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
})

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",

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 ?

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)

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

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);