immutablejs instructions

[jokeyrhyme]

I'm working from https://github.com/davezuko/react-redux-starter-kit if that helps explain my context.

This is the custom reducer I needed:

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

let initialState;

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

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

    return state;
};

I had to read the following to figure this out:

• Officially document @@router/LOCATION_CHANGE #298
• https://github.com/reactjs/react-router-redux/blob/v4.0.0/src/reducer.js

Also, I had to set up a custom "selectLocationState" selector to get immutable store values to be fed to Router correctly:

import createHistory from 'history/lib/createHashHistory';
// or: import createHistory from 'history/lib/createBrowserHistory';
import { useRouterHistory } from 'react-router';
import { syncHistoryWithStore } from 'react-router-redux';

const createSelectLocationState = () => {
  let prevRoutingState, prevRoutingStateJS;
  return (state) => {
    const routingState = state.get('routing'); // or state.routing 
    if (typeof prevRoutingState === 'undefined' || prevRoutingState !== routingState) {
      prevRoutingState = routingState;
      prevRoutingStateJS = routingState.toJS();
    }
    return prevRoutingStateJS;
  };
};

const browserHistory = useRouterHistory(createHistory)({
  basename: __BASENAME__
});
const history = syncHistoryWithStore(browserHistory, store, {
  selectLocationState: createSelectLocationState()
});

// pass above "history" to Router component as a prop

That's mentioned here:

• https://github.com/reactjs/react-router-redux#what-if-i-use-immutablejs-with-my-redux-store

Update: added createSelectLocationState fix

[jokeyrhyme]

gajus/redux-immutable#23

[jamesisaac]

Exactly what I needed, thanks. Was just trying to figure this out myself but getting stuck because I'd forgotten the .toJS() in the custom selectLocationState imlementation. The very outdated instructions in the https://github.com/gajus/redux-immutable readme (which comes up very high in Google) don't help. Would be great to have this documented somewhere.

[timdorr]

This is already in the docs: https://github.com/reactjs/react-router-redux#what-if-i-use-immutablejs-with-my-redux-store

If you want to submit a PR with a better answer to that question, I'll happily merge it in 😄

[gajus]

The very outdated instructions in the https://github.com/gajus/redux-immutable readme (which comes up very high in Google) don't help.

Which part of documentation are you referring to? There is nothing outdated as far as I am aware.

[timdorr]

@gajus It looks like this section isn't updated for 4.0.0: https://github.com/gajus/redux-immutable#using-with-react-router-redux

[jamesisaac]

Yup, API has changed in a couple of places. Compare with the snippet at the top of this thread.

[gajus]

very outdated

Is not the expression to use when API has changed 1 day ago (relative to the time of the post).

On Feb 29, 2016, at 17:43, Tim Dorr notifications@github.com wrote:

@gajus It looks like this section isn't updated for 4.0.0: https://github.com/gajus/redux-immutable#using-with-react-router-redux

—
Reply to this email directly or view it on GitHub.

[jamesisaac]

My bad, sorry - came across this project on the day of posting and wasn't looking at the dates, so didn't realise the current API was this recent.

[renanvalentin]

Thanks @jokeyrhyme !

[jokeyrhyme]

The syncHistoryWithStore part in my original post (up the top) results in a brand new JavaScript Object each time, so which means the whole Immutable state in Redux will be brand new every time it executes (which is very regularly, even when the user does nothing).

I'll be updating the OP with example code from here:

• infinite loop with immutables #314 (comment)

[sjparsons]

I just put together an example app demonstrating React Router + Redux + Immutable.js
https://github.com/sjparsons/react-router-redux-immutable

[Kronuz]

The actual code for createSelectLocationState that fixes the issue is:

const createSelectLocationState = () => {
	let prevRoutingState, prevRoutingStateJS;
	return (state) => {
		const routingState = state.get('routing');
		if (typeof prevRoutingState === 'undefined' || !prevRoutingState.equals(routingState)) {
			prevRoutingState = routingState;
			prevRoutingStateJS = routingState.toJS();
		}
		return prevRoutingStateJS;
	};
};


const history = syncHistoryWithStore(browserHistory, store, {
	selectLocationState: createSelectLocationState(),
});

Note prevRoutingState.equals(routingState) is used, instead of prevRoutingState !== routingState, to compare the immutable objects.

[couturecraigj]

This sorta fixed the issue... it seems to have impacted the goBack functionality from what I can tell.