This repo has moved to Omnistac/zedux - specifically the immer package.
Official Immer bindings for Zedux. Because Zedux + Immer = Awesome.
Provides a few simple, standard helper methods for wrapping Zedux reactors in Immer producers.
Install using npm:
npm install --save zedux-immerOr yarn:
yarn add zedux-immerOr include the appropriate unpkg build on your page:
<script src="https://unpkg.com/zedux-immer/dist/zedux-immer.js"></script><script src="https://unpkg.com/zedux-immer/dist/zedux-immer.min.js"></script>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.
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:
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.
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'))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.
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'))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() // 1All 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
The MIT License.