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:
``javascript
const selectedProduct = createReducer(state = null, {
[PRODUCT]: {
[SELECT]: (state, payload) => payload,
[TOGGLE]: (state, payload) => state === payload ? null : payload,
[UNSELECT]: () => null,
}
});
`

TypeScript, Flow Type:
`javascript
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
`javascript
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:
`javascript
const createProduct = createActionCreator(PRODUCT_CREATE)

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

TypeScript:
`javascript
interface IProduct {
id: number;
name: string;
}

const createProduct = createActionCreator(PRODUCT_CREATE)

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

Flow Type:
`javascript
declare type TProduct = {
id: number;
name: string;
}

const createProduct = createActionCreator(PRODUCT_CREATE)

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

Create an Async Action Creator

`javascript
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:
`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:
`javascript
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:
`javascript
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

`javascript
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

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

- flow coverage
`javascript
$ 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)
``