redux-action-object
Define your Redux actions and reducers using object literal or ES6 class syntax. Also, a handy method for working with side effects.
Show me the code
; // Model todos = // Class properties are used as the initial state ... ; { // That's reducer return todos: ... } // Bootstrap codeconst actionCreators reducer = actionObject;const store = ;const actions:TodoModel = actionObject; // UI@Component { actions; // Actions are already bound to the store }
Why?
When using conventional Redux code related to actions become spread across different places:
- Switch in reducers
- Action type constants
- Action creators
So when you add a new action or modify existing one you need to make changes in at least 3 different places.
Redux-action-object helps this by enabling you to simultaneously define actions and reducers in the same code constructs, using ES6 classes.
Usage
You start with creating a class for you model. The class may contain properties and methods. Class properties are used to define the initial state. Member functions are used to define reducers and actions:
todos = text: 'Use Redux' completed: false id: 0 ; { return todos: ...thistodos id: thistodos + 1 completed: false text: text }
Instance of this model class is split into Redux action creators and reducer:
; const actionCreators reducer = actionObject;
actionCreators is an object with property keys equals to the method names in the model. Property values are Redux action creators. Action type will be equals to method name. For the code above, actionCreators will be:
actionCreators = {
add: function(...arguments) {
return {
type: 'add',
params: [].slice.call(arguments)
}}
}
}
Then you create a store and bind action creators to it
const store = createStore(reducer);
const actions:TodoModel = actionObject.bind(actionCreators, store.dispatch);
Now, you are ready to use it in your components:
@connect(state => ({ todos: state.todos }))
class TodosComponent extends React.Component {
handleSave(text) {
actions.add(text); // Actions are already bound to the store
}
}
Working with Side Effects
In order to completely define actions within classes, redux-action-object provides a way to define side effects within reducer code.
; { // reducer function actionObject; return todos: ... }
Side effect function will be called after executing reducer. Inside side effect, this will be pointing to actual store state. It means that the side effect can use reducer results, like in the above example.
To enable side effects you need to use actionObject.withSideEffects while creating Redux store:
; const store = createStorereducer;
Side effects can also be used without the classes:
{ }
More examples
Using object literals instead of classes
let model = a: false a: !thisa ;
Nesting properties and functions with literals
let model = a: 1 b: c: 5 a: val b: c: 6 nested: a: val b: c: 6 );
Actions can be reference as expected:
; const actionCreators reducer = actionObject;const store = ;const actions = actionObject; actionsnested;
Define action creators in models
; let model = a: 1 findUserRequest: actionObject;
or
; a = 1; @actionObjectcreator { return }
Full example
Full example is located in todo-demo.js file. To start it, run
npm start
and the open
http://localhost:3000/
Contribution
Feel free to create an issue or send a PR
License
MIT. See LICENSE