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
Production
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:
const immerizedReactor =
A not-so-contrived example:
// Create an actorconst addTodo = // Create a reactor (note the mutation! :O)const todosReactor = // Immerize the reactorconst immerizedTodosReactor = // Create the storeconst todosStore = // And have a blasttodosStoretodosStore
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:
// Create an actorconst increment = // Create an immutable reactorconst counterReactor = // a mutation >:)
Here's the above immerizeReactor()
example using immutablyReact()
// Create an actorconst addTodo = // Create an immutable reactor (as always, note the mutation)const todosReactor = // Create the storeconst todosStore = // And have a blasttodosStoretodosStore
Exploring further
Curried Immer producers can be used directly as Zedux inducers:
// Create the store and hydrate its initial stateconst store = // Create some Immerized inducersconst increment = const decrement = storestorestore store // 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.