/Neox

Alternative of ImmutableJS that works smoothly with Redux hooks

Primary LanguageTypeScriptMIT LicenseMIT

Neox

Installation

npm install --save @neocoast/neox 
or
yarn add @neocoast/neox

Usage

import fromJS from '@neocoast/neox';

const state = fromJS({
  loading: false,
  username: null,
});

console.log(intialState);
// {values: Map(2), toJS: ƒ, set: ƒ}

console.log(state.values);
// Map(2) {"loading" => false, "username" => null}

console.log(state.toJS());
// {loading: false, username: null}

// Change username
state.set('username', 'tintef');

console.log(state.toJS());
// {loading: false, username: 'tintef'}


// Chained set calls
state.set('username', 'maurocen').set('loading', true);

console.log(state.toJS());
// {loading: false, username: 'maurocen'}

Usage with redux-devtools

In order to correctly see your reducers chart in Redux's devtools, the following needs to be done:

const devToolsExtension = window.__REDUX_DEVTOOLS_EXTENSION__ ? (
  window.__REDUX_DEVTOOLS_EXTENSION__({
    serialize: {
      replacer: (key, value) => value && value.toJS ? value.toJS() : value
    },
  })
) : (
  (f) => f
);

Motivation

ImmutableJS doesn't work well with Redux's hooks -- see this issue.

Neox doesn't change the values references inside the object retrieved by the toJS() method and this allows the following comparisson:

const state = fromJS({ arr: ['tintef', 'maurocen'] });

console.log(state.toJS().arr === state.toJS().arr);
// true

If you're currently using Immutable, an effect triggered by changes on state.toJS().arr will be triggered even when arrhasn't changed at all. This is because Immutable's toJS() function changes the references of the internal values. Neox doesn't change the internal references unless .set is called. So your effect will only be triggered when you set a new array to it.

Icons made by Freepik from www.flaticon.es