redux-actions
Search…
Tutorial
Installation
For NPM users
1
$ npm install --save redux-actions
Copied!
For Yarn users
1
$ yarn add redux-actions
Copied!
For UMD users
Vanilla Counter
We are going to be building a simple counter, I recommend using something like jsfiddle or codepen or codesandbox if you would like to follow along, that way you do not need a complicated setup to grasp the basics of
redux-actions.To begin we are going to need some scaffolding so here is some HTML to get started with. You may need to create a new file called main.js depending on where you are trying to set this tutorial up.
1
<!doctype html>
2
<html>
3
<head>
4
<meta charset="utf-8"/>
5
<script src="https://unpkg.com/[email protected]/dist/redux.js"></script>
6
<script src="https://unpkg.com/[email protected]/dist/redux-actions.js"></script>
7
</head>
8
<body>
9
<button id="increment">INCREMENT</button>
10
<button id="decrement">DECREMENT</button>
11
<div id="content" />
12
<script src="main.js"></script>
13
</body>
14
</html>
Copied!
Now that we are ready to write some JS let us create our default state for our counter.
1
const defaultState = { counter: 0 };
Copied!
Now if we want to see our default state we need to render it. Lets get a reference to our main content and render our default state into the html.
1
const content = document.getElementById('content');
2
3
const render = () => {
4
content.innerHTML = defaultState.counter;
5
};
6
render();
Copied!
With our default state and renderer in place we can start to use our libraries.
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!We are going to want a store for our defaultState. We can create one from
redux using createStore.1
const { createStore } = window.Redux;
Copied!
We are going to want to create our first action and handle that action.
1
const { createAction, handleAction } = window.ReduxActions;
Copied!
Next lets create our first action, 'increment', using
createAction.1
const increment = createAction('INCREMENT');
Copied!
Next we are going to handle that action with
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.1
const reducer = handleAction(
2
increment,
3
(state, action) => ({
4
...state,
5
counter: state.counter + 1
6
}),
7
defaultState
8
);
Copied!
handleAction produced a reducer for our redux store. Now that we have a reducer we can create a store.1
const store = createStore(reducer, defaultState);
Copied!
Now that we have a
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.1
const render = () => {
2
content.innerHTML = store.getState().counter;
3
};
4
5
store.subscribe(render);
Copied!
We are ready to
dispatch an action. Lets create an event listener for our increment button that will dispatch our increment action creator when clicked.1
document.getElementById('increment').addEventListener('click', () => {
2
store.dispatch(increment());
3
});
Copied!
If you try to click the increment button you should see the value is now going up by one on each click.
We have one button working, so why don't we try to get the second one working by creating a new action for decrement.
1
const decrement = createAction('DECREMENT');
Copied!
Instead of using
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.1
const { createAction, handleActions } = window.ReduxActions;
2
3
const reducer = handleActions(
4
{
5
[increment]: state => ({ ...state, counter: state.counter + 1 }),
6
[decrement]: state => ({ ...state, counter: state.counter - 1 })
7
},
8
defaultState
9
);
Copied!
Now when we add a handler for dispatching our
decrement action we can see both increment and decrement buttons now function appropriately.1
document.getElementById('decrement').addEventListener('click', () => {
2
store.dispatch(decrement());
3
});
Copied!
You might be thinking at this point we are all done. We have both buttons hooked up, and we can call it a day. Yet we have much optimizing to do.
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.We have declarations for both
increment and decrement action creators. We can modify these lines from using createAction to using createActions like so.1
const { createActions, handleActions } = window.ReduxActions;
2
3
const { increment, decrement } = createActions('INCREMENT', 'DECREMENT');
Copied!
We can still do better though. What if we want an action like
'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.1
const { increment, decrement } = createActions({
2
INCREMENT: (amount = 1) => ({ amount }),
3
DECREMENT: (amount = 1) => ({ amount: -amount })
4
});
5
6
const reducer = handleActions(
7
{
8
[increment]: (state, { payload: { amount } }) => {
9
return { ...state, counter: state.counter + amount };
10
},
11
[decrement]: (state, { payload: { amount } }) => {
12
return { ...state, counter: state.counter + amount };
13
}
14
},
15
defaultState
16
);
Copied!
Now that we have moved our logic, our
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.1
const { createActions, handleActions, combineActions } = window.ReduxActions;
2
3
const reducer = handleActions(
4
{
5
[combineActions(increment, decrement)]: (
6
state,
7
{ payload: { amount } }
8
) => {
9
return { ...state, counter: state.counter + amount };
10
}
11
},
12
defaultState
13
);
Copied!
We have finally used all of the tools that
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.Last modified 3yr ago
Copy link