Gnar Edge: Precision edging for JS apps


Part of Project Gnar:  base  •  gear  •  piste  •  off-piste  •  edge  •  powder  •  genesis  •  patrol

Get started with Project Gnar on  

Join Project Gnar on  

Support Project Gnar on  

Gnar Edge is a sharp set of JS utilities:  base64  •  drain  •  handleChange  •  JWT  •  notifications  •  redux

#### Installation

``bash
npm install gnar-edge
`

or

`bash
yarn add gnar-edge
`

#### Packages

Gnar Edge ships with three distinct types of packages:
- Single optimized (45.0 KB) ES5 main package
- Discreet ES5 tree-shakable packages (sizes listed below)
- ES6 tree-shakable modules (recommended)

Choose only one type of package to use in your application; mixing package types will needlessly increase the size of your production build.

The ES5 packages are transpiled via Babel using the following browserslist setting:

`json
"browserslist": [ ">0.25%", "ie >= 11" ]
`

This is a fairly conservative setting, largely due to the inclusion of IE 11 (scroll down), and may result in build that is larger than necessary for your specific needs. The overall browser market share of that setting can be found at browserl.ist, however the global coverage listed there is a bit misleading. Babel uses the lowest common denominator of all the ES6 features in your code vs. the target browsers' ES6 support to determine which shims to include in the build. The global market share of browsers that support your code with the bundled shims is likely much higher. If you prefer to transpile Gnar Edge using a different set of target browsers, use Gnar Edge's ES6 modules.

Gnar Edge is written in ES6+. See the ES6 Tree-Shakable Modules section for more info.

#### Main Package

Chose the main package when want ES5 code and you plan to use all the Gnar Edge utilities in your app or when the combined size of the utilities (listed below) you choose to use exceeds 45.0 KB.

The main package is smaller than the combined total of the tree-shakable packages (45.0 KB vs. 54.7 KB) due to the webpack module overhead, module overlap (i.e. base64 and jwt) and overlap of the babel shims between modules.

The main package may grow over time. There is a high probability that new utilities will be added to Gnar Edge in the future and all new utilities will be added to the main package. Whenever a new utility is added, Gnar Edge's major semver will be incremented (e.g. 1.x.x -> 2.0.0).

##### Usage

The main package can be used as an ES6 import or a Node require:

`javascript
import { base64, drain, handleChange, jwt, notifications } from 'gnar-edge';
`

or

`javascript
const { base64, drain, handleChange, jwt, notifications } = require('gnar-edge');
`

In the module docs and code examples, we'll be using the ES6 format.

#### ES5 Tree-Shakable Packages

If you want ES5 code and you only need some of Gnar Edge's utilities, we can take advantage of Webpack's tree shaking to reduce the size of your production build.

The tree-shakable packages are:

Package | Size
-- | --:
gnar-edge/base64 | 2.3 KB
gnar-edge/drain | 3.5 KB
gnar-edge/handleChange | 2.8 KB
gnar-edge/jwt | 4.2 KB
gnar-edge/notifications | 35.6 KB
gnar-edge/redux | 6.3 KB

##### Usage

Each tree-shakable package can be used as an ES6 import or a Node require, for example:

`javascript
import base64 from 'gnar-edge/base64';
`

or

`javascript
const base64 = require('gnar-edge/base64').default;
`

In the module docs and code examples, we'll be using the ES6 format.

#### ES6 Tree-Shakable Modules

Gnar Edge is written in ES6+, i.e. ES6 mixed with a few features that are in the TC39 process, namely the bind operator (::) and decorators. Using Gnar Edge's ES6 modules will significantly reduce your production build size vs. using the ES5 packages, but it does require extra setup work. The ES6 modules that ship with Gnar Edge are not minified (minification / uglification should be part of your build process).

The ES6 modules are:

Module | Size
-- | --:
gnar-edge/es/base64 | 0.7 KB
gnar-edge/es/drain | 2.1 KB
gnar-edge/es/handleChange | 0.6 KB
gnar-edge/es/jwt | 2.1 KB
gnar-edge/es/notifications | 19.6 KB
gnar-edge/es/redux | 3.3 KB

The minified module sizes reported above are produced in the Gnar Powder build. YMMV.

The total gzipped size of gnar-edge (excluding drain) is 4.6 KB. This is really the most noteworthy number since it is the number of bytes that will be transmitted over the wire if your server is properly configured.

To use the ES6 modules with Babel 7, follow these steps:

1. Install the following babel plugins:

`bash
npm i -D \
@babel/plugin-syntax-dynamic-import \
@babel/plugin-proposal-function-bind \
@babel/plugin-proposal-export-default-from \
@babel/plugin-proposal-decorators \
@babel/plugin-proposal-class-properties
`

1. Add these plugins to your babel.config.js file, e.g.

`javascript
{
presets: [
'@babel/preset-env',
'@babel/react'
],
env: {
production: {
presets: [ 'react-optimize' ]
}
},
plugins: [
'react-hot-loader/babel',
'@babel/transform-runtime',
'@babel/plugin-syntax-dynamic-import',
'@babel/plugin-proposal-function-bind',
'@babel/plugin-proposal-export-default-from',
[ '@babel/plugin-proposal-decorators', { legacy: true } ],
[ '@babel/plugin-proposal-class-properties', { loose: true } ]
]
}
`

Check the Edge and Powder repos for complete examples of package.json and babel.config.js.

1. Update your webpack module rule for javascript to not exclude gnar-edge. You will likely have a js rule that looks like:

`javascript
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: 'babel-loader'
}
`

Change the rule to:

`javascript
{
test: /\.jsx?$/,
exclude: /node_modules\/(?!gnar-edge)/,
use: 'babel-loader'
}
`

This tells babel to transpile the gnar-edge code along with your application code.

1. If you're linting with eslint, add "legacyDecorators": true to parserOptions.ecmaFeatures in .eslintrc.

1. If you're testing with Jest, add or update transformIgnorePatterns in package.json to exclude gnar-edge, e.g.

`json
"transformIgnorePatterns": [
"/node_modules/(?!gnar-edge)"
],
`

This tells Jest to transpile the gnar-edge code.

1. Use the Gnar Edge es modules in your app, e.g.:

`javascript
import base64 from 'gnar-edge/es/base64';
`

Base64

- Code
- Tests / Examples

Usage:

Using the ES5 main package:

`javascript
import { base64 } from 'gnar-edge';
`

or, using the ES5 tree-shakable package:

`javascript
import base64 from 'gnar-edge/base64';
`

or, using the ES6 tree-shakable module:

`javascript
import base64 from 'gnar-edge/es/base64';
`

Read the package usage section if you're unsure of which format to use.

The base64 package provides three simple functions for encoding and decoding base64 content:
- base64.decode handles both traditional and web-safe base64 content, outputs a UTF-8 string
- base64.encode encodes a UTF-8 string to web-safe base64
- base64.encodeNonWebSafe encode a UTF-8 string to traditional base64

Examples:

`javascript
base64.encode('✓ à la mode'); // '4pyTIMOgIGxhIG1vZGU='
base64.decode('4pyTIMOgIGxhIG1vZGU='); // '✓ à la mode'
base64.encode(' >'); // 'ICA-'
base64.encode(' ?'); // 'ICA_'
base64.encodeNonWebSafe(' >'); // 'ICA+'
base64.encodeNonWebSafe(' ?'); // 'ICA/'
`

Acknowledgements
- MDN offers two alternative solutions for transcoding Unicode to Base64.

Drain

- Code
- Tests / Examples

Usage:

Using the ES5 main package:

`javascript
import { drain } from 'gnar-edge';
`

or, using the ES5 tree-shakable package:

`javascript
import drain from 'gnar-edge/drain';
`

or, using the ES6 tree-shakable module:

`javascript
import drain from 'gnar-edge/es/drain';
`

Read the package usage section if you're unsure of which format to use.

Drain converts a generator function to a promise. It supports yields of all JS types, i.e.:
- Functions / Thunks
- Promises
- Generator Functions
- Generators
- Async Functions
- Arrays (recursively)
- Plain (i.e. Literal) Objects (recursively)
- Basic JS Types (Number, String, Boolean, Date, etc.)

Example:

`javascript
drain(function* () {
let result = 1;
result *= yield 2;
const array = yield [3];
result *= array[0];
const object = yield { x: 4 };
result *= object.x;
result *= yield new Promise(resolve => { setTimeout(() => { resolve(5); }, 10); });
result *= yield () => 6;
result *= yield () => new Promise(resolve => { setTimeout(() => { resolve(7); }, 10); });
const mixedArray = yield [
8,
new Promise(resolve => { setTimeout(() => { resolve(9); }, 10); }),
() => new Promise(resolve => { setTimeout(() => { resolve(10); }, 10); })
];
mixedArray.forEach(x => { result *= x; });
const mixedObject = yield {
a: 11,
b: new Promise(resolve => { setTimeout(() => { resolve(12); }, 10); }),
c: () => new Promise(resolve => { setTimeout(() => { resolve(13); }, 10); })
};
Object.values(mixedObject).forEach(x => { result *= x; });
function* generatorFunction1() {
return yield 14;
}
result *= yield generatorFunction1;
function* generatorFunction2(x) {
return yield x;
}
const generator = generatorFunction2(15);
result *= yield generator;
result *= yield async () => {
try {
return await new Promise(resolve => { setTimeout(() => { resolve(16); }, 10); });
} catch (e) {
throw e;
}
};
return result;
})
.then(result => { console.log(result); / 20922789888000, i.e. 16! / });
`

#### Implementation Note

Drain returns a function which returns a promise. The returned function includes three convenience methods, then, catch, and finally which invoke the function and chain onto the resulting promise.

The six basic methods of utilizing drain are:
- as a function:

`javascript
const fn = drain(function* () {});
`

- as a promise:

`javascript
const promise = drain(function* () {})();
`

- then chained:

`javascript
drain(function* () { return yield 'oh, yeah!'; })
.then(result => { console.log(result); });
`

`bash
>> 'oh, yeah!'
`

- then chained with error support:

`javascript
drain(function* () { throw new Error('oops'); yield 'unreachable'; }).then(
result => { console.log(result); },
error => { console.log(error.message);
});
`

`bash
>> 'oops'
`

- catch chained:

`javascript
drain(function* () { throw new Error('oops, I did it again'); yield 'unreachable'; })
.catch(error => { console.log(error.message); });
`

`bash
>> 'oops, I did it again'
`

- finally chained:

`javascript
drain(function* () { throw new Error('oops'); yield 'unreachable'; })
.finally(() => { console.log('always called'); });
`

`bash
>> 'always called'
`

#### Usage with Jest

Testing generator functions in Jest is simple with drain.

Example:

`javascript
describe('Testing a generator function', drain(function* () {
const theAnswerToLifeTheUniverseAndEverything = yield 42;
expect(theAnswerToLifeTheUniverseAndEverything).toBe(42);
}));
`

Acknowledgements

co by @tj provides similar functionality to drain.

I initially used co in Project Gnar. I wrote drain as an enhancement to co to add these features:
- handle basic JS types (numbers, strings, booleans, dates, etc)
- handle functions and thunks without a callback (i.e. co's done)
- fix an issue with co.wrap - I had to override co.wrap to get it to pass along the generator function in my Jest tests
- provide a single dual-purpose interface, i.e. drain replaces both co and co.wrap
- ES6 implementation - co is written in ES5 whereas drain is written in ES6 and transpiled via Babel
- Simplified implementation: 43 SLOC vs. 101

HandleChange

- Code
- Tests / Examples

Usage:

Using the ES5 main package:

`javascript
import { handleChange } from 'gnar-edge';
`

or, using the ES5 tree-shakable package:

`javascript
import handleChange from 'gnar-edge/handleChange';
`

or, using the ES6 tree-shakable module:

`javascript
import handleChange from 'gnar-edge/es/handleChange';
`

Read the package usage section if you're unsure of which format to use.

The handleChange package provides an onChange event handler which updates the state of a bound React element. It accepts an optional callback and an optional set of options.

- handleChange(<< stateKeyName: String >>, << ?callback: Function >>, << ?options >>)

options:

- beforeSetState [Function]: Function to call before updating the state.

It works with:
-
-
-
-
- <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><strong>Example:</strong></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript<br />import React, { Component } from 'react';<br />import handleChange from 'gnar-edge/handleChange';</p><p class="my-3">export default class MyView extends Component {<br /> state = {<br /> firstName: '',<br /> lastName: ''<br /> };</p><p class="my-3"> handleChange = this::handleChange; // when using the ES7 stage 0 bind operator, or<br /> handleChange = handleChange.bind(this); // when using the ES5 bind function</p><p class="my-3"> beforeLastNameChange = () => {<br /> console.log('Before change', this.state.lastName);<br /> }</p><p class="my-3"> handleLastNameChange = () => {<br /> console.log('After change', this.state.lastName);<br /> }</p><p class="my-3"> render() {<br /> const { firstName, lastName } = this.state;<br /> const beforeSetState = this.beforeLastNameChange;<br /> return (<br /> <div><br /> <input onChange={this.handleChange('firstName')} /><br /> <input onChange={this.handleChange('lastName', this.handleLastNameChange, { beforeSetState })} /><br /> </div><br /> <div></code>Hello, ${firstName} ${lastName}!<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></div><br /> );<br /> }<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">JWT</h2></p><p class="my-3">The </code>jwt<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> package provides a set of utilities to simplify the handling of <a href="https://jwt.io/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">jwt tokens</a>.</p><p class="my-3"><strong>Usage:</strong></p><p class="my-3">Using the <a href="#main-package" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">ES5 main package</a>:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript<br />import { jwt } from 'gnar-edge';<br />const { base64, getJwt, isLoggedIn, jwtDecode } = jwt; // or use </code>jwt.base64<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, etc.<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">or, using the <a href="#es5-tree-shakable-packages" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">ES5 tree-shakable package</a>:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript<br />import { base64, getJwt, isLoggedIn, jwtDecode } from 'gnar-edge/jwt';<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">or, using the <a href="#es6-tree-shakable-modules" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">ES6 tree-shakable module</a>:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript<br />import { base64, getJwt, isLoggedIn, jwtDecode } from 'gnar-edge/es/jwt';<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">Read the <a href="#packages" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">package usage</a> section if you're unsure of which format to use.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">The <a href="#base64" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">base64</a> package is included in the </code>jwt<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> package.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">- <a href="https://gitlab.com/gnaar/edge/blob/master/src/modules/getJwt.js" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Code</a><br />- <a href="https://gitlab.com/gnaar/edge/blob/master/src/modules/__tests__/getJwt.test.js" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Tests / Examples</a></p><p class="my-3">Retrieves a jwt token from localStorage and decodes it:<br />- </code>getJwt(<< keyName: String >>)<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. </code>keyName<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> defaults to </code>'jwt'<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.</p><p class="my-3"><strong>Example:</strong></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript<br />import { getJwt } from 'gnar-edge/jwt';</p><p class="my-3">const myJwt = getJwt();<br />const myCustomKeyJwt = getJwt('J-W-T');<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">- <a href="https://gitlab.com/gnaar/edge/blob/master/src/modules/isLoggedIn.js" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Code</a><br />- <a href="https://gitlab.com/gnaar/edge/blob/master/src/modules/__tests__/isLoggedIn.test.js" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Tests / Examples</a></p><p class="my-3">Retrieves a jwt token from localStorage (using <a href="#getjwt" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">getJwt</a>) and returns a Boolean indicating whether or not the jwt token has expired:<br />- </code>isLoggedIn(<< keyName: String >>)<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. </code>keyName<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> defaults to </code>'jwt'<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.</p><p class="my-3"><strong>Example:</strong></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript<br />import { isLoggedIn } from 'gnar-edge/jwt';</p><p class="my-3">...</p><p class="my-3"><Route render={() => <Redirect to={isLoggedIn() ? '/account' : '/login'} />} /><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">- <a href="https://gitlab.com/gnaar/edge/blob/master/src/modules/jwtDecode.js" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Code</a><br />- <a href="https://gitlab.com/gnaar/edge/blob/master/src/modules/__tests__/jwtDecode.test.js" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Tests / Examples</a></p><p class="my-3">Decodes a JWT token.</p><p class="my-3"><strong>Example:</strong></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript<br />import { jwtDecode } from 'gnar-edge/jwt';</p><p class="my-3">const jwtToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJuYW1lIjoiRmxhaXIsIEduYXIgRmxhaXIifQ.-gYkrEvtdghFzzKecKdu_gITvJFwEdOHPYXdp643-2w';</p><p class="my-3">console.log(jwtDecode(jwtToken).name);<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">bash<br />>> 'Edge, Gnar Edge'<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Notifications</h2></p><p class="my-3">!<a href="https://gitlab.com/gnaar/edge/raw/master/assets/notifications.gif" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Notifications Animation</a></p><p class="my-3"><strong>Usage:</strong></p><p class="my-3">Using the <a href="#main-package" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">ES5 main package</a>:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript<br />import { notifications } from 'gnar-edge';<br />const {<br /> ADD_NOTIFICATION,<br /> DISMISS_NOTIFICATION,<br /> Notifications,<br /> dismissNotifications,<br /> notificationActions,<br /> notifications,<br /> notifyError,<br /> notifyInfo,<br /> notifySuccess,<br /> notifyWarning<br />} = notifications; // or use </code>notifications.ADD_NOTIFICATION<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, etc.<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">or, using the <a href="#es5-tree-shakable-packages" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">ES5 tree-shakable package</a>:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript<br />import {<br /> ADD_NOTIFICATION,<br /> DISMISS_NOTIFICATION,<br /> Notifications,<br /> dismissNotifications,<br /> notificationActions,<br /> notifications,<br /> notifyError,<br /> notifyInfo,<br /> notifySuccess,<br /> notifyWarning<br />} from 'gnar-edge/notifications'<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">or, using the <a href="#es6-tree-shakable-modules" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">ES6 tree-shakable module</a>:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript<br />import {<br /> ADD_NOTIFICATION,<br /> DISMISS_NOTIFICATION,<br /> Notifications,<br /> dismissNotifications,<br /> notificationActions,<br /> notifications,<br /> notifyError,<br /> notifyInfo,<br /> notifySuccess,<br /> notifyWarning<br />} from 'gnar-edge/es/notifications'<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">Read the <a href="#packages" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">package usage</a> section if you're unsure of which format to use.</p><p class="my-3">The notifications package requires the following npm packages to be installed in your app (i.e. in the </code>dependencies<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> section of </code>package.json<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">):<br />- @material-ui/core<br />- @material-ui/icons<br />- animate.css<br />- classnames<br />- immutable<br />- prop-types<br />- react<br />- react-dom<br />- react-redux<br />- redux<br />- redux-actions<br />- redux-saga</p><p class="my-3">If your app is based on <a href="https://gitlab.com/gnaar/powder" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Gnar Powder</a>, these packages are already installed. Otherwise, these notifications will work with any Redux Saga-based app that includes the packages listed above. The following command will install any packages you may be missing:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">bash<br />npm i @material-ui/core @material-ui/icons animate.css classnames immutable prop-types react react-dom react-redux redux redux-actions redux-saga<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">In addition to installing the dependencies, you must add the </code>Notifications<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> component to your DOM and add the </code>notifications<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> reducer to your root reducer.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">- <a href="https://gitlab.com/gnaar/edge/blob/master/src/modules/notifications/components/notifications.jsx" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Code</a><br />- <a href="https://gitlab.com/gnaar/edge/blob/master/src/modules/notifications/__tests__/components/notifications.test.jsx" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Tests / Examples</a></p><p class="my-3">The </code>Notifications<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> component should be placed at the root of the application, for example:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript<br />import { Notifications } from 'gnar-edge/notifications';</p><p class="my-3">...</p><p class="my-3"><Grid container><br /> <Grid item xs={12}><br /> <Switch><br /> ...<br /> </Switch><br /> <Notifications /><br /> </Grid><br /></Grid><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">The component accepts one property, </code>position<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, in the form </code>'<< vertical position >> << horizontal position >>'<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> with default </code>'top right'<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. The acceptable values are:<br />- <strong>vertical:</strong> 'top' or 'bottom'<br />- <strong>horizontal:</strong> 'left', 'center', or 'right'</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">- <a href="https://gitlab.com/gnaar/edge/blob/master/src/modules/notifications/redux/reducers.js" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Code</a><br />- <a href="https://gitlab.com/gnaar/edge/blob/master/src/modules/notifications/__tests__/redux/actions-reducers.test.js" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Tests / Examples</a></p><p class="my-3">The </code>notifications<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> reducer must be added to your root reducer, for example:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript<br />import { combineReducers } from 'redux';<br />import { notifications } from 'gnar-edge/notifications';</p><p class="my-3">export default combineReducers({<br /> ...<br /> notifications,<br /> ...<br />});<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3"></code>ADD_NOTIFICATION<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> and </code>DISMISS_NOTIFICATION<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> are provided for use with an action watcher (optional).</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">- <a href="https://gitlab.com/gnaar/edge/blob/master/src/modules/notifications/redux/actions.js" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Code</a><br />- <a href="https://gitlab.com/gnaar/edge/blob/master/src/modules/notifications/__tests__/redux/actions-reducers.test.js" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Tests / Examples</a></p><p class="my-3">The </code>notificationActions<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> can be used in any view, for example:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript<br />import { connect } from 'react-redux';<br />import { notificationActions } from 'gnar-edge/notifications';<br />import Button from '@material-ui/core/Button';<br />import React, { Component } from 'react';</p><p class="my-3">const mapStateToProps = () => ({});</p><p class="my-3">const mapDispatchToProps = notificationActions;</p><p class="my-3">@connect(mapStateToProps, mapDispatchToProps)<br />export default class MyView extends Component {</p><p class="my-3"> newSuccess = () => { this.props.notifySuccess('More Success!', { autoDismissMillis: 2000, onDismiss: this.newSuccess }); }</p><p class="my-3"> render() {<br /> const { dismissNotification, notifyError, notifyInfo, notifySuccess, notifyWarning } = this.props;<br /> return (<br /> <div><br /> <Button onClick={() => notifySuccess('Such Success!')}>Success</Button><br /> <Button onClick={() => notifyError('You shall not pass.')}>Error</Button><br /> <Button onClick={() => notifyInfo('Gnarly info, dude.')}>Info</Button><br /> <Button onClick={() => notifyWarning('Danger, Will Robinson!')}>Warning</Button><br /> <Button onClick={() => notifyInfo("I'm sticking around", { key: 'sticky', autoDismissMillis: 0 })}>Sticky</Button><br /> <Button onClick={() => dismissNotification('sticky')}>Dismiss Sticky</Button><br /> <Button onClick={this.newSuccess}>Perpetual Success</Button><br /> </div><br /> );<br /> }<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">Each notify method accepts an optional set of options. The available options are:<br />- <strong>autoDismissMillis</strong>: Number of milliseconds to wait before auto-dismissing the notification; specify 0 for no auto-dismiss (i.e. the user must click the close icon).<br />- <strong>key</strong>: String to override the autogenerated notification key; for use with an action watcher - when a notification is dismissed, the </code>DISMISS_NOTIFICATION<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> action is dispatched with a payload containing the notification key.<br />- <strong>onDismiss</strong>: Callback to execute when the notification is dismissed; the callback receives a single Boolean parameter which indicates whether or not the notification was dismissed by the user (i.e. the user clicked the close icon).</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">- <a href="https://gitlab.com/gnaar/edge/blob/master/src/modules/notifications/redux/sagas.js" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Code</a><br />- <a href="https://gitlab.com/gnaar/edge/blob/master/src/modules/notifications/__tests__/redux/sagas.test.js" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Tests / Examples</a></p><p class="my-3">The notifications utility generator functions can be used in any Redux Saga, for example:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript<br />import { takeEvery } from 'redux-saga/effects';<br />import { notifySuccess } from 'gnar-edge/notifications';</p><p class="my-3">function* successAction() {<br /> yield notifySuccess('Such Saga Success!');<br />}</p><p class="my-3">export default function* watchSuccessAction() {<br /> yield takeEvery('SUCCESS_ACTION', successAction);<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">The available sagas are </code>dismissNotification<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>notifyError<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>notifyInfo<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>notifySuccess<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>notifyWarning<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.</p><p class="my-3">The notify sagas accept the same options (</code>autoDismissMillis<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>key<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, and </code>onDismiss<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">) as the notify actions.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Redux</h2></p><p class="my-3">Boilerplate-nixing convenience functions for creating actions and reducers.</p><p class="my-3"><strong>Usage:</strong></p><p class="my-3">Using the <a href="#main-package" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">ES5 main package</a>:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript<br />import { redux } from 'gnar-edge';<br />const { gnarActions, gnarReducers } = redux; // or use </code>redux.gnarActions<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, etc.<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">or, using the <a href="#es5-tree-shakable-packages" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">ES5 tree-shakable package</a>:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript<br />import { gnarActions, gnarReducers } from 'gnar-edge/redux'<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">or, using the <a href="#es6-tree-shakable-modules" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">ES6 tree-shakable module</a>:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript<br />import { gnarActions, gnarReducers } from 'gnar-edge/es/redux'<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">Read the <a href="#packages" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">package usage</a> section if you're unsure of which format to use.</p><p class="my-3"><br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">- <a href="https://gitlab.com/gnaar/edge/blob/master/src/modules/redux/gnarActions.js" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Code</a><br />- <a href="https://gitlab.com/gnaar/edge/blob/master/src/modules/redux/__tests__/gnarActions.test.js" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Tests / Examples</a></p><p class="my-3">A common pattern when creating Redux actions looks like this:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript<br />import { createAction } from 'redux-actions';</p><p class="my-3">export const SOME_ACTION = 'SOME_ACTION';<br />export const SOME_OTHER_ACTION = 'SOME_OTHER_ACTION';<br />export const REALLY_BASIC_ACTION = 'REALLY_BASIC_ACTION';<br />export const ACTION_WITH_CUSTOM_PAYLOAD_CREATOR = 'ACTION_WITH_CUSTOM_PAYLOAD_CREATOR';</p><p class="my-3">export default {<br /> groupOfActions: {<br /> someAction: createAction(SOME_ACTION, (param1, param2, param3) => ({ param1, param2, param3 })),<br /> someOtherAction: createAction(SOME_OTHER_ACTION, param1 => ({ param1 }))<br /> },<br /> someOtherGroupOfActions: {<br /> reallyBasicAction: createAction(REALLY_BASIC_ACTION, () => ({})),<br /> actionWithCustomPayloadCreator: createAction(ACTION_WITH_CUSTOM_PAYLOAD_CREATOR, cost => ({ cost: 2 * cost }))<br /> }<br />};<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">The actions are often split out into a bunch of small files, like I did with <a href="https://gitlab.com/gnaar/powder/tree/b76d0b41170f6e575b0f8be599a99ee9421ec835/src/js/redux/actions" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Gnar Powder before I wrote </code>gnarActions<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></a>.</p><p class="my-3">It would be nice if we could reduce this code a bit. Using </code>gnarActions<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, the code above becomes:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript<br />import { gnarActions } from 'gnar-edge/es/redux';</p><p class="my-3">export const SOME_ACTION = 'SOME_ACTION';<br />export const SOME_OTHER_ACTION = 'SOME_OTHER_ACTION';<br />export const REALLY_BASIC_ACTION = 'REALLY_BASIC_ACTION';<br />export const ACTION_WITH_CUSTOM_PAYLOAD_CREATOR = 'ACTION_WITH_CUSTOM_PAYLOAD_CREATOR';</p><p class="my-3">export default gnarActions({<br /> groupOfActions: {<br /> [SOME_ACTION]: [ 'param1', 'param2', 'param3' ],<br /> [SOME_OTHER_ACTION]: 'param1'<br /> },<br /> someOtherGroupOfActions: {<br /> [REALLY_BASIC_ACTION]: [],<br /> [ACTION_WITH_CUSTOM_PAYLOAD_CREATOR]: cost => ({ cost: 2 * cost })<br /> }<br />});<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">Removing all the boilerplate has a nice impact on our code's readability. It also becomes clear that consolidating actions into fewer files improves maintainability. Check out <a href="https://gitlab.com/gnaar/powder/blob/095ff44307bf8d53fd647fd70714be3e948f9459/src/js/redux/actions.js" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">the difference in Gnar Powder</a> after incorporating Gnar Edge Redux.</p><p class="my-3"><strong>Tip</strong>: You might be tempted to use </code>SOME_ACTION<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> instead of </code>[SOME_ACTION]<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> in the actions object - don't. The interpolated version binds the object key to the action constant.</p><p class="my-3">#### How does </code>gnarActions<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> work?</p><p class="my-3">It recursively iterates through the input object looking for the following pattern:</p><p class="my-3">- <em>key</em>: All uppercase letters, digits and underscores, i.e. matches </code>/^([A-Z\d]+_)*[A-Z\d]+$/<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />- <em>value</em>: String, empty array, array of strings, or function.</p><p class="my-3">For every match, it performs the following transformation:</p><p class="my-3">- <em>key</em>: Converts to camelcase<br />- <em>value</em>: Converts to a Redux action following the pseudocode template:</p><p class="my-3"> </code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript<br /> createAction(<< key >>, (param1, param2, param3, ...) => ({ param1, param2, param3, ... }))<br /> </code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"> or with a predefined </code>payloadCreator<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">:</p><p class="my-3"> </code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript<br /> createAction(<< key >>, payloadCreator)<br /> </code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">If a node in the input object doesn't match the key, value pattern outline above, the node is retained unchanged in the output actions (unless the nodes is a literal object, then we recurse through it). This allows us to include actions that don't match the pattern that is transformed using the template. For example:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript<br /> groupOfActions: {<br /> [SOME_ACTION]: [ 'param1', 'param2', 'param3' ],<br /> anotherAction: createAction(SOME_OTHER_ACTION, (param1, param2, ...) => { return someFancyObject; })<br /> }<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">- <a href="https://gitlab.com/gnaar/edge/blob/master/src/modules/redux/gnarReducers.js" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Code</a><br />- <a href="https://gitlab.com/gnaar/edge/blob/master/src/modules/redux/__tests__/gnarReducers.test.js" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Tests / Examples</a></p><p class="my-3">A common pattern when creating Redux reducers looks like:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript<br />import { handleActions } from 'redux-actions';</p><p class="my-3">export const SOME_ACTION = 'SOME_ACTION';<br />export const SOME_OTHER_ACTION = 'SOME_OTHER_ACTION';<br />export const YET_ANOTHER_ACTION = 'YET_ANOTHER_ACTION';</p><p class="my-3">export default {<br /> someStoreNode: handleActions({<br /> [SOME_ACTION]: (state, { payload }) => ({ ...state, ...payload }),<br /> [SOME_OTHER_ACTION]: (state, { payload }) => ({ ...state, ...payload }),<br /> }, {} /<em> <- initial state </em>/),<br /> someParentStoreNode: {<br /> someChildStoreNode: handleActions({<br /> [YET_ANOTHER_ACTION]: (state, { payload }) => { return someFancyObject; }<br /> }, { fruit: 'apple' })<br /> }<br />};<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">The reducers are often split out into a bunch of small files, like I did with <a href="https://gitlab.com/gnaar/powder/tree/b76d0b41170f6e575b0f8be599a99ee9421ec835/src/js/redux/reducers" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Gnar Powder before I wrote </code>gnarReducers<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></a>.</p><p class="my-3">It would be nice if we could also, <em>ahem</em>, reduce this code a bit. Using </code>gnarReducers<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, the code above becomes:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript<br />import { gnarReducers } from 'gnar-edge/es/redux';</p><p class="my-3">export const SOME_ACTION = 'SOME_ACTION';<br />export const SOME_OTHER_ACTION = 'SOME_OTHER_ACTION';<br />export const YET_ANOTHER_ACTION = 'YET_ANOTHER_ACTION';</p><p class="my-3">export default gnarReducers({<br /> someStoreNode: {<br /> basicReducers: [ SOME_ACTION, SOME_OTHER_ACTION ]<br /> },<br /> someParentStoreNode: {<br /> someChildStoreNode: {<br /> initialState: { fruit: 'apple' },<br /> customReducers: {<br /> [YET_ANOTHER_ACTION]: (state, { payload }) => { return someFancyObject; }<br /> }<br /> }<br /> }<br />});<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">Again, removing all the boilerplate has a nice impact on our code's readability and it becomes clear that consolidating reducers into fewer files improves maintainability. Check out <a href="https://gitlab.com/gnaar/powder/blob/095ff44307bf8d53fd647fd70714be3e948f9459/src/js/redux/reducers.js" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">the difference in Gnar Powder</a> after incorporating Gnar Edge Redux.</p><p class="my-3">But wait, there's more! If a node is a string or an array, it's interpreted as basicReducers. That means our example can be further simplified to:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript<br />export default gnarReducers({<br /> someStoreNode: [ SOME_ACTION, SOME_OTHER_ACTION ],<br /> someParentStoreNode: { ... }<br />});<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### How does </code>gnarReducers<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> work?</p><p class="my-3">It recursively iterates through the input object looking for the following pattern:</p><p class="my-3">- <em>key</em>: The key is not checked<br />- <em>value</em>: String, array, or an object containing either </code>basicReducers<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> or </code>customReducers<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> (or both)</p><p class="my-3">For every match, it performs the following transformation:</p><p class="my-3">- <em>key</em>: No change<br />- <em>value</em>: Converts to a redux reducer following the pseudocode template:</p><p class="my-3"> </code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript<br /> const node = << node value is String || Array >> ? { basicReducers: << node value >> } : << node value >>;<br /> const { initialState, basicReducers, customReducers } = node;<br /> const parsedReducers = {<br /> ...(typeof basicReducers === 'string' ? [ basicReducers ] : basicReducers || []).reduce((memo, key) => {<br /> memo[key] = (state, { payload }) => ({ ...state, ...payload })<br /> return memo;<br /> }, {}),<br /> ...(customReducers || {})<br /> };<br /> return handleActions(parsedReducers, initialState || {});<br /> </code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">If a node in the input object isn't a string, an array, or an object that includes </code>basicReducers<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> or </code>customReducers<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> in its value, the node is retained unchanged in the output reducer (unless the nodes is a literal object, then we recurse through it). This allows us to include predefined reducers in the input object.</p><p class="my-3">##### Optional Parameters</p><p class="my-3"></code>gnarReducers<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> accepts two optional parameters, </code>defaultInitialState<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, and </code>defaultReducer<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.</p><p class="my-3">- </code>defaultInitialState<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: Function which returns the desired <a href="https://redux-actions.js.org/api/handleaction#handleactionsreducermap-defaultstate" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"></code>defaultState<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> parameter</a> for </code>handleActions<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.<br />- </code>defaultReducer<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: Reducer function to use in place of the reducer used for the basic reducers, i.e.</p><p class="my-3"> </code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript<br /> (state, { payload }) => ({ ...state, ...payload })<br /> </code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">##### Immutable Maps</p><p class="my-3"></code>gnarReducers<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> is also designed to work with <a href="http://facebook.github.io/immutable-js/docs/#/Map" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Immutable Maps</a>.</p><p class="my-3">To activate the Immutable Map mode, either specify </code>Map<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> as the </code>defaultInitialState<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> or specify a function that returns a </code>Map<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, for example:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript<br />import { Map } from 'immutable';<br />import { gnarReducers } from 'gnar-edge/es/redux';</p><p class="my-3">export default gnarReducers({ ... }, Map);<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">In Immutable Map mode, the </code>defaultReducer<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> becomes:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript<br />(state, { payload }) => state.merge(payload)<br /></code>``</p><p class="my-3">---</p><p class="my-3"><p><div align="center">Made with <img alt='Love' width='32' height='27' src='https://s3-us-west-2.amazonaws.com/project-gnar/heart-32x27.png'> by <a href='https://www.linkedin.com/in/briengivens'>Brien Givens</a></div></p><br /></p></div><div class="flex justify-center absolute inset-x-0 bottom-0 bg-gradient-to-t from-background via-background to-transparent pb-4 pt-16"><button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down mr-1 h-4 w-4"><path d="m6 9 6 6 6-6"></path></svg>Show more</button></div></div></div><template id="P:3"></template><template id="P:4"></template></div></div></div><div hidden id="S:3"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-dependencies" hidden="" id="radix-_R_aav5ubrb_-content-dependencies" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:3","P:3")</script><div hidden id="S:4"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-versions" hidden="" id="radix-_R_aav5ubrb_-content-versions" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS("S:4","P:4")</script><script>$RC("B:1","S:1")</script></body></html>