redux-container-state-thunk v0.4.0

redux-container-state-thunk

Note: Work in progress. This project is not ready to be used

Provides local thunk middleware for containers in redux-container-state

The idea behind thunk middleware is based upon the great work of redux-thunk.

Example usage

import React from 'react'
import { view, applyLocalMiddleware } from 'redux-container-state'
import localThunk from 'redux-container-state-thunk'


const increment = () => {
  return {
    type: 'INCREMENT_COUNTER'
  }
}

const incrementAsync = () => {
  return (dispatch, getState) => {
    setTimeout(() => {
      dispatch(increment());
    }, 1000)
  }
}

const counterUpdater = updater((model = 0, action) => {
  switch (action.type) {
    case 'INCREMENT_COUNTER': 
      return model + 1
    default:
      return model
  }
})

const viewWithMiddleware = compose(applyLocalMiddleware(localThunk))(view)

export default viewWithMiddleware(({model, dispatch}) => (
  <div>
    <button onClick={ () => dispatch(incrementAsync()) }>Start counter</button>
    Current count: { model }
  </div>
))

The 'INCREMENT_COUNTER' action will be dispatched within the scope of the view

Getting a hold of the global dispatcher instead of the local dispatcher

Note: This has not been validated yet (but it should work like this)

In your local action creators, you get a hold of the store's (global) dispatch method and getState

    const localActionCreator = () => (dispatch, getState, globalDispatch, getGlobalState) => {
      dispatch({ type: 'LOCAL_INCREMENT' })
      globalDispatch({ type: 'GLOBAL_INCREMENT' })
    }

Installation & Usage

You can install redux-container-state-thunk via npm.

npm install redux-container-state-thunk --save