redux-story v0.1.1

redux-story

Create and dispatch weaved stories

redux-story is a redux middleware which lets you dispatch functions or generators that we will call stories.
Stories gets injected with dispatch and getState from the store, but also with helper functions.
A bunch of handy helpers are provided, but you can create your own and inject them anytime.

Fast Setup

import { createStore } from 'redux'
import storyMiddleware from 'redux-story'
  

const store = createStore(
	appReducer,
	{
		user: null,
		posts: [],
	},
	applyMiddleware(
		storyMiddleware()
	)
)

If you want more control over storyMiddleware helpers and processors, see storyMiddleware signature.

Stories signature

function ({ dispatch, getState }, helpers)
/* or */
function* ({ dispatch, getState }, helpers)

Built-in helpers

take

take(actionType)

take returns a Promise object which get resolved when the specified action gets dispatched.

@param actionType : string, the action type to wait for

@returns a Promise object
@resolves with the action object

takeWhen

takeWhen(stateComparison[, actionComparison])

takeWhen returns a Promise which gets resolved when the state meets stateComparison requirements, and optionally, the dispatched action meets actionComparison requirements.

@param stateComparison : function, a function taking store state in parameter and returns true of false
@param optional actionComparison : function, a function taking dispatched action and returns true of false

@returns a Promise object @resolves with { state, action }

Create and inject your helpers

Example. Too lazy for now.

import {
  default as storyMiddleware,
  createDefaultHelpers,
} from 'redux-story'

const createMyHelpers = ({dispatch, getState, subscribe}) => {
  /*
   * subscribe() is a special function which takes a function as first argument
   * and calls it anytimes an action gets dispatched.
   *
   * The function signature is (updatedState, dispatchedAction)
   * It returns an unsubscribe function to stop listening
   */
  return {
    // Dispatch an action after `delay`ms
    dispatchIn: (action, delay = 500) => setTimeout(() => dispatch(action), delay),
    
    // Returns a Promise which gets resolved when 2 specified actions gets dispatched within 1 second
    takeTwoActionsWithinOneSecond: (actionOne, actionTwo) => new Promise((resolve, reject) => {
      let actionsTime = {
        [actionOne]: 0,
        [actionTwo]: 0
      }
      
      let unsubscribe = subscribe((state, action) => {
        let time = (new Date()).getTime()
        
        if (action.type == actionOne || action.type == actionTwo) {
           actionsTime[action.type] = time
          if (Math.abs(actionsTime[actionOne] - actionsTime[actionTwo]) <= 1000) {
            unsubscribe()
            resolve()
          }
        }
      }
    }
  }
}
       
const store = createStore(
  appReducer,
  null,
  applyMiddleware(
    storyMiddleware([createDefaultHelpers, createMyHelpers]) // Left ones gets erased if same key
  )
)