redux-actions
.redux
and redux-actions
can be found via the globals window.Redux
and window.ReduxActions
. Okay enough setup lets start to make something with redux
!redux
using createStore
.createAction
.handleAction
. We can provide it our increment
action to let it know which action to handle, a method to handle our state transformation, and the default state.handleAction
produced a reducer for our redux
store. Now that we have a reducer we can create a store.store
, we can rewrite our render
method to use it instead of the defaultState
. We also want to subscribe
our render
to any changes the store
might have for us.dispatch
an action. Lets create an event listener for our increment button that will dispatch our increment
action creator when clicked.handleAction
like we did for increment
, we can replace it with our other tool handleActions
which will let us handle both increment
and decrement
actions.decrement
action we can see both increment
and decrement
buttons now function appropriately.redux-actions
has other tools we have not yet taken advantage of. So lets investigate how we can change the code to use the remaining tools and make the code less verbose.increment
and decrement
action creators. We can modify these lines from using createAction
to using createActions
like so.'INCREMENT_FIVE'
? We would want to be able to create variations of our existing actions easily. We can abstract our logic in the reducer to our actions, making new permutations of existing actions easy to create.reducers
are looking identical. If only we could combine them somehow. Well we can! combineActions
can be used to reduce multiple distinct actions with the same reducer.redux-actions
has to offer. Concluding our vanilla tutorial. This doesn't mean you don't have more to learn though. Much more can be accomplished using these tools in many ways, just head on over to the API Reference to begin exploring what else redux-actions
can do for you.