This is a javascript library for creating easy redux actions with less code. Based in class and inheritance
Installation
npm install redux-action-namespace
# or
yarn add redux-action-namespaceYou can create the redux and the actions in the same class.
import { DefaultAction, createActionTypes, createReducer } from 'redux-action-namespace'
// declare intial state
const initialState = {
count: 0
};
// declare action classes
class INCREMENT_COUNT extends DefaultAction {
callRdx(state, action) {
const count = state.count++;
return {
...state,
count
}
}
}
class DECREMENT_COUNT extends DefaultAction {
//redefine callRDX method
callRdx(state, action) {
const count = state.count--;
return {
...state,
count
}
}
}
const actions = {
INCREMENT_COUNT : new INCREMENT_COUNT(),
DECREMENT_COUNT: new DECREMENT_COUNT()
}
// create actions, namespace is required
const handlers = createActionTypes(actions, "COUNT_NS");
//export the reducer and add to the reducer state.
export const countReducer = createReducer(initialState, handlers);
export default actions;
// use the actions
state.dispatch(actions.INCREMENT_COUNT.call());
console.log(state.countReducer.count) // expect be 1
state.dispatch(actions.DECREMENT_COUNT.call());
console.log(state.countReducer.count) // expect be 0Default Action do not required custom implementation. Don't need to even describe the callRdx
import { DefaultAction, createActionTypes, createReducer } from 'redux-action-namespace'
// declare intial state
const initialState = {
id: null,
user:{ address:null }
};
// declare action classes
const actions = {
SET_ID : new DefaultAction("id"),
SET_CITY_NAME: new DefaultAction("address.city.name")
}
// create actions, namespace is required
const handlers = createActionTypes(actions, "USER_NS");
//export the reducer and add to the reducer state.
export const userReducer = createReducer(initialState, handlers);
export default actions;
// use the actions
state.dispatch(actions.SET_ID.call(1));
console.log(state.userReducer.id) // expect be 1
state.dispatch(actions.SET_CITY_NAME.callRdx("Miami"));
console.log(state.userReducer.address.city.name) // MiamiState Action when you need 3 step actions. (SEND, SUCCESS, FAILED)
import { StateAction, ACTION_STATES, createActionTypes, createReducer } from 'redux-action-namespace'
// declare intial state
const initialState = {
updateState: null,
user:{ address:null }
};
// declare action classes
const actions = {
UPDATE_USER : new UPDATE_USER("loading")
}
// create actions, namespace is required
const handlers = createActionTypes(actions, "USER_NS");
//export the reducer and add to the reducer state.
export const userReducer = createReducer(initialState, handlers);
export default actions;
// use the actions
state.dispatch(actions.UPDATE_USER.send());
console.log(state.userReducer.updateState) // expect be ACTION_STATES.SEND
const user = {
id:1
}
state.dispatch(actions.UPDATE_USER.success(user));
console.log(state.userReducer.user.id) // expect be 1
console.log(state.userReducer.updateState) // expect be SUCCESS
// you can failed
const error = new Error("message")
state.dispatch(actions.UPDATE_USER.failed(null, error));
console.log(state.userReducer.updateState) // expect be FAILED
console.log(state.userReducer.error.message) // expect be messageThe createActionTypes function is used to generate action types based on the provided actions and namespace.
- actions: An object containing the actions for which types need to be generated.
- nameSpace: String namespace to be used in creating action types.
- ActionObjectFunction : An object containing the generated action types.
import { createActionTypes } from 'redux-action-namespace';
// Define actions and namespace
const actions = {
action1: new StateAction(),
action2: new DefaultAction()
};
const nameSpace = 'exampleNamespace';
// Generate action types
const actionTypes = createActionTypes(actions, nameSpace);- Provide the actions and namespace to the createActionTypes function.
- Receive the object containing the generated action types based on the input actions and namespace.
The createReducer function is used to create a Redux reducer based on the provided initial state and a mapping of action types to corresponding reducer functions.
-
initialState: The initial state of the reducer. -
actionHandlers: An object mapping action types to corresponding reducer functions.
-
reducer(function): A Redux reducer function that handles state updates based on the dispatched actions.
import { createReducer, createActionTypes } from 'redux-action-namespace';
// Define initial state
const initialState = {
count: 0,
loading: false
};
// Define actions and namespace
const actions = {
action1: new StateAction(),
action2: new DefaultAction()
};
const nameSpace = 'exampleNamespace';
// Generate action types
const actionTypes = createActionTypes(actions, nameSpace);
// Create the reducer
const reducer = createReducer(initialState, actionHandlers);- Provide the initial state and action handlers to the
createReducerfunction. - Receive a Redux reducer function that handles state updates based on the dispatched actions.
This function simplifies the process of creating Redux reducers by allowing you to define action handlers in a clear and concise manner.
Check the TODO example here
Unit test cases here
For modifications create a Pull Request.