Skip to content
⚛️ An automatic Redux reducer, taking the pain out of Redux.
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.


Type Name Latest commit message Commit time
Failed to load latest commit information.


An automatic Redux reducer, taking the pain out of Redux.


npm i --save Diluter


Create a Store

import Diluter from 'Diluter'

const defaultState = {
  USER: { name: '', id: 0 },

const store = Diluter(defaultStore)
  <Provider store={store}>
    <App />
, document.getElementById('root'))

Connect a Component

import { Connector } from 'Diluter'

class App extends Component {
  render() {
    return (
        Hello {}!
        You have {this.props.FRIENDS.length} friends.

// Connector takes 3 arguments:
// 1. The React Component
// 2. The keys of the store to pass as props
// 3. Actions to be mapped with dispatch as props
export default Connector(App, ['USER', 'FRIENDS'], [])

Dispatching an Action

const setUserName = name => dispatch => {
    type: 'USER', // The key to target in the store
    name // Automatically apply the name to the "USER" object

class SetName extends Component {
  render() {
    return (
        Please choose a new name.
          placeholder={'John Doe'}
          onChange={e => this.props.setUserName(}

// "setUserName" needs to recieve a dispatch function to
// dispatch changes to the store. This is automatically
// mapped to all functions passed in the 3rd argument,
// after which they're passed to the component via props.
export default Connector(SetName, ['USER'], [setUserName])

Action with Custom Reducer

// In this case, friend is an object containing
// arbitrary data about the user. Not 
const addFriend = friend => dispatch => {
    type: 'FRIENDS',
    reducer: (state) => {
      // This function will determine the new state
      // of the "FRIENDS" object in the store instead
      // of the usual automatic reducer built into Diluter.

      // Append the friend object to the store (FREINDS object)
      return [...state, friend]

Hook into the Reducer

// The hook allows you to modify reductions after the
// normal reducer but before it gets applied to the store.
const hook = (newState, action) => {
  // Set a value with the key "lastAction" containing
  // the action in the store before applying it.
  return { ...newState, lastAction: action }
const store = Diluter(defaultState, hook)
You can’t perform that action at this time.