Repository files navigation

Getrid of your reducer boilerplate!

Zero hassle state management that's typed, flexible and scalable.

npm install riduce

Whether you're usinguseReducer orredux, reducer boilerplate is tedious to learn, setup and maintain.

What if type-safe state management was quicker, easier and simpler?

Riduce is a library written to be:

• Strongly-typed, so your state stays predictable
• Trivial to scale as your state grows more complex
• Zero hassle, withjust two lines of code...

... and one of the 2 lines to setup is animport.

importriducefrom'riduce'const[reducer,actions]=riduce(initialState)

That's it! Now you've got a type-safereducer and arbitraryactions, with zero hassle.

Let's see it in use!

🚧 Full documentation for Riduce is under construction - but the API is essentially the same asRedux-Leaves, exceptriduce replaces thereduxLeaves default export.Currently documented here are indicative examples on setup, usage and customisation. These give quite a lot of information about how the library is used.For more specifics, please consult the Redux-Leaves documentation to see, e.g., thedefault action creators whichcreate gives access to.

For auseReducer example,see this CodeSandbox.

For aredux example, you can run thisRepl.it.

For more advanced usage of Riduce, seethis example.

Below, we'll walk through the introductory Redux example, showing:

1. Zero hassle setup with 2 lines of code;
2. Scalable state management with arbitrary actions; and
3. Typesafe action creators to mirror your state's shape.

Let's imagine we're controlling the state for a museum.

import{createStore}from'redux'importriducefrom'riduce'// 1st line: importconstmuseumState={isOpen:false,visitor:{counter:0,guestbook:['richard woz here']}}const[reducer,actions]=riduce(museumState)// 2nd line: setupconst{ getState, dispatch}=createStore(reducer)

And that's it. Those two lines replaceall of our reducer boilerplate.

Continuing on fromabove, let's:

1. Open our museum;
2. Add to the visitor counter;
3. Sign the guestbook; and
4. Amend a guestbook entry.

Previously, you might create 4 x reducer branches, action types and action creators.

Riducer gets rid of all that boilerplate.

Now, it's as simple as describing the changes we want to see!

// at `state.isOpen`, create an action to toggle the booleandispatch(actions.isOpen.create.toggle())// at `state.visitor.counter`, create an action to add 5dispatch(actions.visitor.counter.create.increment(5))// at `state.visitor.guestbook`, create an action to push a stringdispatch(actions.visitor.guestbook.create.push('LOL from js fan'))// at `state.visitor.guestbook[0]`, create an action to concat a stringdispatch(actions.visitor.guestbook[0].create.concat('!!!'))getState()/*{  isOpen: true,  visitor: {    counter: 5,    guestbook: [      'richard woz here!!!',      'LOL from js fan'    ]  }}*/

All this is possible because Riduce'sactions gives youloads of convenient action creators out of the box, which you canuse liberally throughout your state tree:update,set,filter,reset, and many more...

It's also possible to add your own in, as documented inadvanced Riduce usage.

Now we've seen that Riduce iszero-hassle setup forarbitrary action creators without the reducer boilerplate.

It's written in TypeScript, so it's helpfully typed right out of the box as well!

// can we push to a boolean? no!// ❌ TypeError: (ts 2339) Property 'push' does not exist on type...actions.isOpen.create.push()// can we push to an array without an argument? no!// ❌ TypeError: (ts 2554) Expected 1-3 arguments, but got 0.actions.visitor.guestbook.create.push()// can we push a number to an inferred string[]? no!// ❌ TypeError: (ts 2345) Argument of type '10' is not assignable to parameter of type 'string'.actions.visitor.guestbook.create.push(10)// can we push a string to an inferred string[]? yeah, okay then.// ✅ compiles!actions.visitor.guestbook.create.push('10')

You may wish to check out the following:

• Riduce: advanced usage
• Riduce withuseReducer: CodeSandbox demo
• Riduce with Redux: Repl.it demo

Advanced Riduce usage includes:

1. Bundle multiple actions into a single dispatch;
2. Execute arbitrary reducer logic for extendability;
3. Add custom reducers for reusability; and
4. Control action types for debugging (e.g. Redux DevTools).

Have fun adding it to your project!

npm install riduce

🚧 Full documentation for Riduce is under construction - but the API is essentially the same asRedux-Leaves, exceptriduce replaces thereduxLeaves default export.Currently documented here are indicative examples on setup, usage and customisation. These give quite a lot of information about how the library is used.For more specifics, please consult the Redux-Leaves documentation to see, e.g., thedefault action creators whichcreate gives access to.