redux-land

intuitive middleware for redux.

Install

yarn add redux-land

or

npm install --save redux-land

Features

• dispatch multiple actions with async-generator-functions
• type safe (with typescript. you can see example)

Usage

import { createStore, applyMiddleware } from 'redux';
import createLandMiddleware from 'redux-land';
 
// action types 
const INC      = "INC";
const ASYNCINC = "ASYNCINC";
 
// reducer
const reducer = (state = {counter: 0}, action) => {
  switch(action.type){
    case INC:
      return {...state, counter: state.counter + 1 }
    default:
      return {...state}
  }
}
 
function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}
 
const asyncInc = async function* ({state,action}) {
  await sleep(1000);
  yield {type: INC}; // this action will be dispatched.
  await sleep(action.payload);
  yield {type: INC};// you can dispatch action, any number of times
}
 
 
const landMiddleware = createLandMiddleware({
  [ASYNCINC] : asyncInc, // object-with-dynamic-keys
});
 
const store = createStore(reducer,applyMiddleware(landMiddleware));
 
// later
store.dispatch({
  type: ASYNCINC,
  payload: 3000,
});
 

Usage (TypeScript)

types.ts

import { Action } from "redux";
 
export type State = {
  loaded: boolean;
  status: boolean;
};
 
export enum ActionType {
  LOADING = "LOADING",
  LOADED  = "LOADED",
  SUCCESS = "SUCCESS",
  FAILED  = "FAILED",
}
 
export type LOADING = Action<ActionType.LOADING>;
export type LOADED  = Action<ActionType.LOADED>;
export type SUCCESS = Action<ActionType.SUCCESS>;
export type FAILED  = Action<ActionType.FAILED>;
 
export enum LandActionType {
  LOAD = "LOAD"
}
 
export type LOAD = Action<LandActionType.LOAD> & {
  payload: string;
};
 
export type Actions = LOADING | LOADED | SUCCESS | FAILED | LOAD;

module.ts

import { createStore, applyMiddleware } from "redux";
import createLandMiddleware, { Land, Lands } from "redux-land";
import axios from "axios";
import {
  State,
  ActionType,
  Actions,
  LandActionType,
  LOAD
} from "./types";
 
const load: Land<State, LOAD, Actions> = async function*({ state, action }) {
  yield {type: ActionType.LOADING};
  try {
    const { status } = (await axios(action.payload));
    if (status >= 200 && status < 300) {
      yield {type: ActionType.SUCCESS};
    } else {
      yield {type: ActionType.FAILED};
    }
  } catch {
    yield {type: ActionType.FAILED};
  }  
  yield {type: ActionType.LOADED};
};
 
const lands : Lands<typeof LandActionType, State, LOAD, Actions> = {
  [LandActionType.LOAD]: load
}
 
const middleware = createLandMiddleware<typeof LandActionType>(lands);
 
const reducer = (state: State = { loaded: true, status: true }, action: Actions) => {
  switch (action.type) {
    case ActionType.LOADING:
      return { ...state, loaded: false };
    case ActionType.LOADED:
      return { ...state, loaded: true };
    case ActionType.SUCCESS:
      return { ...state, status: true };
    case ActionType.FAILED:
      return { ...state, status: false };
    default:
      return state;
  }
};
 
const store = createStore(reducer, applyMiddleware(middleware));
 
export default store;

index.ts

import store from "./module";
import { LandActionType } from "./types";
 
store.dispatch({
  type: LandActionType.LOAD,
  payload: "https://www.sample.com/"
});

Dependency Injection

module.ts

...
 
type Dep = {
  axios: typeof axios
}
 
const load: Land<State, LOAD, Actions, Dep> = async function*({ state, action }, { axios }) { ...
 
export const lands : Lands<typeof LandActionType, State, LOAD, Actions, Dep> = { ...
...
 
const middleware = createLandMiddleware(lands, { axios });
 
export const reducer = ...;
 
...

__tests__/module.spec.ts

...
 
import { lands } from '../module';
const middleware = createLandMiddleware(lands, {
  axios: (url: string) => Promise.resolve({
    status: 200,// you can test on success.
  }),
});
 
...

For unit test

...
 
const itr = load({
  state: {
    loaded: true,
    status: true,
  },
  action: {
    type: LandActionType.LOAD,
    payload: "https://www.sample.com/",
  },
},{
  axios: (url: string) => Promise.resolve({
    status: 200,// you can test on success.
  }),
});
const {value} = await itr.next();
expect(value).toEqual({type: ActionType.LOADING});
...
 

License

MIT