Awesome

[DEPRECATED]

This repo has moved to Omnistac/zedux - specifically the immer package.

Zedux Immer

Official Immer bindings for Zedux. Because Zedux + Immer = Awesome.

Provides a few simple, standard helper methods for wrapping Zedux reactors in Immer producers.

Installation

Install using npm:

npm install --save zedux-immer

Or yarn:

yarn add zedux-immer

Or include the appropriate unpkg build on your page:

Development

<script src="https://unpkg.com/zedux-immer/dist/zedux-immer.js"></script>

Production

<script src="https://unpkg.com/zedux-immer/dist/zedux-immer.min.js"></script>

Getting started

Well, there's not much to it. The entire documentation is contained in this readme.

To learn by getting dirty, you can poke around this codepen.

To learn comprehensively, check out the tests.

Method API

ZeduxImmer exposes just two functions:

• immerizeReactor() – wraps an existing reactor.
• immutablyReact() – creates a new, immutable reactor.

Let's look at each of these in more detail:

immerizeReactor()

Wraps an existing reactor in an immer producer.

This is just a higher-order reactor. Its reducer layer will pass the Immer draft on to the wrapped reactor. Its processor layer is transparent.

Examples

At a high level:

import { immerizeReactor } from 'zedux-immer'
import reactor from './reactor'

const immerizedReactor = immerizeReactor(reactor)

A not-so-contrived example:

import { immerizeReactor } from 'zedux-immer'
import { act, createStore, react } from 'zedux'

// Create an actor
const addTodo = act('addTodo')

// Create a reactor (note the mutation! :O)
const todosReactor = react([])
  .to(addTodo)
  .withReducers((todos, newTodo) => todos.push(newTodo))

// Immerize the reactor
const immerizedTodosReactor = immerizeReactor(todosReactor)

// Create the store
const todosStore = createStore().use(immerizedTodosReactor)

// And have a blast
todosStore.dispatch(addTodo('totally rock'))
todosStore.dispatch(addTodo('totally rock again'))

immutablyReact()

Creates an immutable ZeduxReactor. As such, its api is exactly the same as the ZeduxReactor api.

This is just a convenience – With immerizeReactor() we have to create the reactor then wrap it in an Immer producer. With immutablyReact() we create and wrap the reactor in a single step.

Examples

At a high level:

import { act } from 'zedux'
import { immutablyReact } from 'zedux-immer'

// Create an actor
const increment = act('increment')

// Create an immutable reactor
const counterReactor = immutablyReact({ counter: 0 })
  .to(increment)
  .withReducers(state => state.counter++) // a mutation >:)

Here's the above immerizeReactor() example using immutablyReact()

import { immutablyReact } from 'zedux-immer'
import { act, createStore } from 'zedux'

// Create an actor
const addTodo = act('addTodo')

// Create an immutable reactor (as always, note the mutation)
const todosReactor = immutablyReact([])
  .to(addTodo)
  .withReducers((todos, newTodo) => todos.push(newTodo))

// Create the store
const todosStore = createStore().use(immerizedTodosReactor)

// And have a blast
todosStore.dispatch(addTodo('totally rock'))
todosStore.dispatch(addTodo('totally rock again'))

Exploring further

Curried Immer producers can be used directly as Zedux inducers:

import produce from 'immer'
import { createStore } from 'zedux'

// Create the store and hydrate its initial state
const store = createStore().hydrate({ counter: 0 })

// Create some Immerized inducers
const increment = produce(state => state.counter++)
const decrement = produce(state => state.counter--)

store.dispatch(increment)
store.dispatch(increment)
store.dispatch(decrement)

store.getState() // 1

Contributing

All contributions are welcome. Just jump right in. Open an issue. PRs, just keep the coding style consistent and the tests at 100% (branches, functions, lines, everything 100%, plz). Be sure to run npm run lint and npm test. Happy coding!

Bugs can be submitted to https://github.com/bowheart/zedux-immer/issues

License

The MIT License.