Easy Peasy v5

# Browsers & React Native

Easy Peasy produces multiple bundle types - support for browsers, Common JS, and ESM.

However, due to our internal usage of Immer (opens new window) your code may break on some older browsers (e.g. IE 11) or some older React Native environments.

Specifically it will break on environments (opens new window) that don't support proxies (opens new window).

We provide a solution to this, however, before we present the solution we would like to describe our motivation for implementing Immer.

# Why Immer?

Immer powers our mutation based API that is supported within actions.

addTodo: action((state, payload) => {
  // Mutating the state directly! 🤯
  //           👇
  state.items.push(payload);
});

Immer (opens new window) converts these mutation operations into immutable updates against the store.

This allows for a much improved developer experience as having to manage immutable update operations yourself can become quite complex. For example here is the same action above written to ensure immutability is met manually.

addTodo: action((state, payload) => {
  return {
    ...state,
    items: [...state.items, payload],
  };
});

That's just a simple example. More complex/nested updates can get very tricky to manage.

# Polyfilling Proxy

If you are getting errors on your console - typically error code 19 or 20 from the Immer package then your execution environment likely does not support proxies (opens new window).

To patch/polyfill your environment you need to include the following import.

import 'easy-peasy/proxy-polyfill';

This should typically be done as early as possible within the entry file of your application.

# Create React App IE11 Support Example

Create React App users will likely need to include a configuration like so, which includes full IE11 support;

import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';
import 'easy-peasy/proxy-polyfill';

Also, don't forget to update your browserslist within your package.json.

   "browserslist": [
+    "ie 11",
     ">0.2%",
     "not dead",
     "not ie <= 10",
     "not op_mini all"
   ]

# Supporting Map or Set within your state

In order to utilize Map or Set within your state you need to include the following import.

import 'easy-peasy/map-set-support';

Similarly to the Proxy polyfill you will need to do this as early as possible within your application entry file.

← Quick Start →