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 = ;
TypeScript, Flow Type:
const selectedProduct = ;
same code written using switch
const selectedProduct = { };
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 = const productData = id: 1 name: "test" // {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" // {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" // {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 = request: success: failure: ;
Usage:
Javascript:
const fetchProductsAction = ; const fetchProducts = { ; productsApi;};
TypeScript:
interface IErrorPayload message: string; const fetchProductsAction = createAsyncActionCreator<{} IProduct IErrorPayload>FETCH_PRODUCTS; const fetchProducts = { ; productsApi;};
Flow Type:
declare type TErrorPayload = message: string; const fetchProductsAction = createAsyncActionCreator<{} TProduct TErrorPayload>FETCH_PRODUCTS; const fetchProducts = { ; productsApi;};
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 = // "PRODUCT_SELECT";const PRODUCT_CREATE = // "PRODUCT_CREATE";const PRODUCT_UPDATE = // "PRODUCT_UPDATE";const 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/indexjs --color ;;;; ; Covered: 10000% 0 of 0 expressions