redux-create

redux-create

redux create reducer, action creator, async action creator, action type

Create a Reducer

• creates nested reducer without need of writing switch statement

Usage:

Javascript:

const selectedProduct = createReducer(state = null, {
  [PRODUCT]: {
    [SELECT]: (state, payload) => payload,
    [TOGGLE]: (state, payload) => state === payload ? null : payload,
    [UNSELECT]: () => null,
  }
});

TypeScript, Flow Type:

const selectedProduct = createReducer(state: null | number = null, {
  [PRODUCT]: {
    [SELECT]: (state, payload) => payload,
    [TOGGLE]: (state, payload) => state === payload ? null : payload,
    [UNSELECT]: () => null,
  }
});

same code written using switch

const selectedProduct = (state = null, action) => {
  switch (action.type) {
    case PRODUCT_SELECT:
      return action.payload;
    case PRODUCT_TOGGLE:
      return state === action.payload ? null : action.payload;
    case PRODUCT_UNSELECT:
      return null;
    default:
      return state;
  }
};

Create Action Creator

• creates Action Creator from one or more strings
• calling the created Action Creator will return Action Object of shape {type: string, payload: any}

Javascript:

const createProduct = createActionCreator(PRODUCT_CREATE)

const productData = {id: 1, name: "test"}
createProduct(productData) // {type: "PRODUCT_CREATE", payload: {id: 1, name: "test"}}

TypeScript:

interface IProduct {
  id: number;
  name: string;
}
 
const createProduct = createActionCreator<IProduct>(PRODUCT_CREATE)
 
const productData: IProduct = {id: 1, name: "test"}
createProduct(productData) // {type: "PRODUCT_CREATE", payload: {id: 1, name: "test"}}

Flow Type:

declare type TProduct = {
  id: number;
  name: string;
}
 
const createProduct = createActionCreator<TProduct>(PRODUCT_CREATE)

const productData: TProduct = {id: 1, name: "test"}
createProduct(productData) // {type: "PRODUCT_CREATE", payload: {id: 1, name: "test"}}

Create an Async Action Creator

• creates object containing Action Creators for async operations (request, success, failure)

const asyncActionType = {
  REQUEST: "REQUEST",
  SUCCESS: "SUCCESS",
  FAILURE: "FAILURE",
};

const createAsyncActionCreator = (...type) => ({
  request: createActionCreator(type, asyncActionType.REQUEST),
  success: createActionCreator(type, asyncActionType.SUCCESS),
  failure: createActionCreator(type, asyncActionType.FAILURE),
});

Usage:

Javascript:

export const fetchProductsAction = createAsyncActionCreator(FETCH_PRODUCTS);

export const fetchProducts = () => (dispatch) => {
  dispatch(fetchProductsAction.request());

  productsApi.fetchProducts().then(
    (payload) => dispatch(fetchProductsAction.success(payload)),
    (error) => dispatch(fetchProductsAction.failure(error)),
  );
};

TypeScript:

interface IErrorPayload {
  message: string;
}

export const fetchProductsAction = createAsyncActionCreator<{}, IProduct[], IErrorPayload>(FETCH_PRODUCTS);

export const fetchProducts = () => (dispatch) => {
  dispatch(fetchProductsAction.request());

  productsApi.fetchProducts().then(
    (payload) => dispatch(fetchProductsAction.success(payload)),
    (error) => dispatch(fetchProductsAction.failure(error)),
  );
};

Flow Type:

declare type TErrorPayload = {
  message: string;
}

 export const fetchProductsAction = createAsyncActionCreator<{}, TProduct[], TErrorPayload>(FETCH_PRODUCTS);

 export const fetchProducts = () => (dispatch) => {
  dispatch(fetchProductsAction.request());

  productsApi.fetchProducts().then(
    (payload) => dispatch(fetchProductsAction.success(payload)),
    (error) => dispatch(fetchProductsAction.failure(error)),
  );
};

Create Action Type

• creates action type from one or more strings
• exposed helper method can be replaced with template strings

const PRODUCT = "PRODUCT";
const CATEGORY = "CATEGORY";
 
const SELECT = "SELECT";
const CREATE = "CREATE";
const UPDATE = "UPDATE";
const DELETE = "DELETE";
 
const PRODUCT_SELECT = createActionType(PRODUCT, SELECT) // "PRODUCT_SELECT";
const PRODUCT_CREATE = createActionType(PRODUCT, CREATE) // "PRODUCT_CREATE";
const PRODUCT_UPDATE = createActionType(PRODUCT, UPDATE) // "PRODUCT_UPDATE";
const PRODUCT_DELETE = createActionType(PRODUCT, DELETE) // "PRODUCT_DELETE";

...

Adding flow support

• add this line to your .flowconfig to get flowtypes in your project

[include]
./node_modules/redux-create/flow-typed/

• flow coverage

$ flow coverage ./src/index.js --color 
import createActionType from "./createActionType";
import createActionCreator from "./createActionCreator";
import {
  asyncAction,
  createAsyncActionCreator,
} from "./createAsyncActionCreator";
import createReducer from "./createReducer";

export {
  createActionType,
  createActionCreator,
  asyncAction,
  createAsyncActionCreator,
  createReducer,
};

Covered: 100.00% (0 of 0 expressions)