Skip to content
⚛️ An automatic Redux reducer, taking the pain out of Redux.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore
Connector.js
GenerateReducer.js
README.md
index.js
package-lock.json
package.json

README.md

Diluter

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


Install

npm i --save Diluter

Usage

Create a Store

import Diluter from 'Diluter'

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

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

Connect a Component

import { Connector } from 'Diluter'

class App extends Component {
  render() {
    return (
      <div>
        Hello {this.props.USER.name}!
        You have {this.props.FRIENDS.length} friends.
      </div>
    )
  }
}

// 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 => {
  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 (
      <div>
        Please choose a new name.
        <input
          placeholder={'John Doe'}
          value={this.props.USER.name}
          onChange={e => this.props.setUserName(e.target.value)}
        />
      </div>
    )
  }
}

// "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 => {
  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.