https://github.com/neocoast/neox

Alternative of ImmutableJS that works smoothly with Redux hooks
https://github.com/neocoast/neox

immutablejs npm react redux redux-hooks

Last synced: 4 days ago
JSON representation

Alternative of ImmutableJS that works smoothly with Redux hooks

• Host: GitHub
• URL: https://github.com/neocoast/neox
• Owner: NeoCoast
• License: mit
• Created: 2020-06-02T18:47:58.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-06T14:00:45.000Z (almost 2 years ago)
• Last Synced: 2024-12-30T16:34:38.043Z (4 days ago)
• Topics: immutablejs, npm, react, redux, redux-hooks
• Language: TypeScript
• Homepage:
• Size: 333 KB
• Stars: 15
• Watchers: 3
• Forks: 0
• Open Issues: 13
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


  

    

  





  

    

    

  



# Neox

## Installation

```bash

npm install --save @neocoast/neox 

or

yarn add @neocoast/neox

```

## Usage

```js

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:

```js

const devToolsExtension = window.__REDUX_DEVTOOLS_EXTENSION__ ? (

  window.__REDUX_DEVTOOLS_EXTENSION__({

    serialize: {

      replacer: (key, value) => value && value.toJS ? value.toJS() : value

    },

  })

) : (

  (f) => f

);

```

## Motivation

[ImmutableJS](https://immutable-js.github.io/immutable-js/) doesn't work well with [Redux's hooks](https://react-redux.js.org/api/hooks) -- see [this issue](https://github.com/reduxjs/redux/issues/3699).

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

```js

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 `arr`hasn'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