Redux-put-take NPM

redux-put-take

what is this?

Tiny side effects handler for redux with async/await. inspired by redux-saga. This middleware given two API for store. Store can be await action and can dispatch action in colutine.

install

$ npm install --save redux-put-take

setup

import { createStore } from 'redux'
import { putTakeMiddleware } from 'redux-put-take'
import { runService } from './services'

const initialState = { count: null }
const reducer = (state = initialState, action) => {
  return (state, action) => {
    switch (action.type) {
      case 'SET_COUNT':
        return { ...state, count: action.payload }
      default:
        return state
    }
  }
}
const store = createStore(reducer(), putTakeMiddleware())
runService(store)

usage

// @ services.js

const type = 'SET_COUNT'
const payload = { count: 0 }
const setCount = (action = { payload: 0 }) => {
  return { type, payload: action.payload }
}

async function watch (store) {
  while (true) {
    const action = await store.take(type)
    console.log(action)
    console.log(store.getState())
    console.log('--')
  }
}

async function watchEven (store) {
  while (true) {
    const action = await store.take(action => {
      return action.payload % 2 === 0
    })
    console.log('payload is even!')
    console.log('--')
  }
}

async function puts (store) {
  await store.put(setCount({ payload: 1 }))
  await store.put(setCount({ payload: 2 }))
  await store.put(setCount({ payload: 3 }))
}

export async function runService (store) {
  watch(store)
  watchEven(store)
  puts(store)
}

// { type: "SET_COUNT", payload: 1 }
// { count: 1 }
// --
// { type: "SET_COUNT", payload: 2 }
// { count: 2 }
// --
// payload is even!
// --
// { type: "SET_COUNT", payload: 3 }
// { count: 3 }
// --