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
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.
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.
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
.
Now, let’s dispatch some 'decrement'
action to the store.
At the bottom of store.js , dispatch 3 actions with a type of 'decrement'
.
Finally, print to the console the final value of store.getState()
. The final state should be -1
.