Skip to Content
Learn
Intro to the Core Redux API
Dispatch Actions to the Store

The store object returned by createStore() provides a number of useful methods for interacting with its state as well as the reducer function it was created with.

The most commonly used method, store.dispatch(), can be used to dispatch an action to the store, indicating that you wish to update the state. Its only argument is an action object, which must have a type property describing the desired state change.

const action = { type: 'actionDescriptor' }; store.dispatch(action);

Each time store.dispatch() is called with an action object, the store’s reducer function will be executed with the same action object. Assuming that the action.type is recognized by the reducer, the state will be updated and returned.

Let’s see how this works in the lightswitch application from the last exercise:

import { createStore } from 'redux'; const initialState = 'on'; const lightSwitchReducer = (state = initialState, action) => { switch (action.type) { case 'toggle': return state === 'on' ? 'off' : 'on'; default: return state; } } const store = createStore(lightSwitchReducer); console.log(store.getState()); // Prints 'on' store.dispatch({ type: 'toggle' }); console.log(store.getState()); // Prints 'off' store.dispatch({ type: 'toggle' }); console.log(store.getState()); // Prints 'on'

In this example, you can also see another store method, store.getState(), which returns the current value of the store’s state. Printing its value between each dispatched action allows us to see how the store’s state changes.

Internally, when the store executes its reducer, it uses store.getState() as the state argument. Though you won’t see it, you can imagine that, when an action is dispatched like this…

store.dispatch({ type: 'toggle'});

…the store calls the reducer like this:

lightSwitchReducer(store.getState(), { type: 'toggle' });

Instructions

1.

Let’s get back to our counter application. The count starts at 0 and we want to increment it up to 2.

At the bottom of store.js dispatch two actions with a type of 'increment' using the store.dispatch() method.

2.

At the bottom of store.js, confirm that the current state of the store is 2 by printing out the current value of the state to the console.

3.

Let’s modify the countReducer function so that it can handle 'decrement' actions as well.

Add an additional case to the countReducer function that handles 'decrement' action types and returns state - 1.

4.

Now, let’s dispatch some 'decrement' action to the store.

At the bottom of store.js , dispatch 3 actions with a type of 'decrement'.

5.

Finally, print to the console the final value of store.getState(). The final state should be -1.

Folder Icon

Take this course for free

Already have an account?