redux-repatch

Redux enhancer for dispatching reducers

Repatch is just a simplfied Redux, that let you create actions more briefly by dispatching reducers directly. However if you would like to use redux with this feature, you need this package.

Installation

npm install --save redux-repatch

How to use

redux-repatch provides a store enhancer, that is usable at creating the store. This enhancer ensures that you can use regular actions and repatch actions together:

import { createStore } from 'redux'
import repatch from 'redux-repatch'

const reducer = (state = 0, action) {
  switch (action.type) {
    'SET_TO_VALUE': return action.value
    default: state
  }
}

const store = createStore(reducer, repatch())

const setToValue = value => ({ type: 'SET_TO_VALUE', value }) // redux action
const increment = value => state => state + value // repatch action

store.dispatch(setToValue(42)) // 42
store.dispatch(increment(10)) // 52

Use with other enhancers

import { createStore, applyMiddlewares, compose } from 'redux'
import repatch from 'redux-repatch'

const store = createStore(
  reducer,
  compose(
    applyMiddlewares(myMiddleware),
    repatch()
  )
)

Use with redux-thunk

We cannot use repatch actions and thunk actions together, because both of actions are defined as functions. Therefore redux-repatch provides a builtin thunk mechanism. The original repatch library shares its own thunk middleware, that's using is optional. redux-repatch does it automatically. In the repatch terminology thunk reducer is a function, that returns a function. We call this function as the delegate.

const waitAndIncrement = time => state => async (dispatch, getState) => {
  await sleep(time);
  dispatch(increment(10))
}

store.dispatch(waitAndIncrement(3000))

However if you would like to use with the original redux-thunk, then you are looking for this: redux-repatch-creator.

Injecting extra argument

import { createStore } from 'redux'
import repatch from 'redux-repatch'
import api from './api'
import { hashHistory } from 'react-router';

const store = createStore(reducer, repatch({ api, hashHistory }))

const updateUser = delta => state =>
  async (dispatch, getState, { api, hashHistory }) => {
    // ...
  }

How it works

The repatch enhancer extends your reducer by handling a special action type, and enhances the store with a middleware. This middleware handles the function-like actions. The thunk actions will fired in the middleware and they returned value will be returned. The regular repatch reducers will be transformed to regular redux action objects with the previously mentioned special action type. Then the extended reducer can handle it.

Import in CommonJS

const repatch = require('redux-repatch').repatch

or

const repatch = require('redux-repatch').default

Bundles

<script src="https://unpkg.com/redux-repatch/dist/redux-repatch.js"></script>

or the minified bundle:

<script src="https://unpkg.com/redux-repatch/dist/redux-repatch.min.js"></script>

then

const repatch = ReduxRepatch.repatch

License

MIT

Community

https://twitter.com/repatchjs

Developed by