REDUX-SUGAR
using redux easely, say goodbye to annoying action.type
, and put action
and reducer
in same scope, in order to better coding.
usage
install:
npm i --save redux-sugar
register, filename ./store.js
:
;; const initialState = {};const initialReducers = {};const store = ; ; ;
transitions(actions
and reducers
), filename ./todoList.state.js
:
name: 'todo-list' initialState: tasks: events: addTodo: { const task = title completed: false ; return task; } { statetasks; return state; } ;
wrapped component ./TodoListComponent.jsx
:
;;;;; ... { const dispatch = thisprops; } ...const mapStateToProp = { var currentState = stateownPropsreduxSugarId; return tasks: currentStatetasks ;};const reduxSugarTodoListComponent = sugarFactoryTodoListComponent;const connectedTodoListComponent = reduxSugarTodoListComponent;;
Tips
first, when coding the the transition, you will never care about the action.type
, just name your transition and put the action
and reducer
in the events
namespace. reducer will recive what the action
return in secode argument, first arguement is state
, just keep same to the redux official.
second, wrap your React Component with sugarFactory.react
, store
and transition
, it works when componentDidMount
and destroy when componentWillUnmount
.
in the wrapped component, reduxSugarId
and actions
will add to this.props
automatically. reduxSugarId
is the namespace in state, if you want to save the state, please try to put a unique reduxSugarId
for each component, especially the component has multiple instance at the same time. actions
is all the actionCreators of your transition, you can dispatch it, e.g.
thisprops
The MIT License (MIT).
Written by qinyuanbin.