Store Back

The Store is the object that bring both Actions and Reducers together.

Store will be responsible for:

• holding application state
• exposing interface of accessing to state: getState()
• exposing interface for getting action dispatching: dispatch(action)
• exposing interface for registering listener on the dispatching event: subscribe(listener)
• handling unregistering of listeners by calling the function return by subscribe(listener)

Create a store

Remember that there is only one single store in a Redux application. To create a producer, what you need is reducer.

import { createStore } from 'redux';
import todoApp from './reducers';

let store = createStore(todoApp);

/** the second argument is optional, which is helpful in matching the state of the client to the state of the server. */
let store = createStore(todoApp, window.STATE_FROM_SERVER);

Dispatching Actions

/** testing todo app's state changments */

import { addTodo, toggleTodo, SetVisibilityFilter, VisibilityFilters } from './actions';

/** log out the initial state */
console.log(store.getState());

/** 
 * Every time the state changes, log it
 * Note that subscribe() returns a function for unregistering the listener
 */
let unsubscribe = store.subscribe(() => {
    console.log(store.getState());
});

/** Dispatching actions */
store.dispatch(addTodo('Learn about actions');
store.dispatch(addTodo('Learn about reducers');
store.dispatch(addTodo('Learn about store');

store.dispatch(toggleTodo(0));
store.dispatch(toggleTodo(1));

store.dispatch(setVisibilityFilter(VisibilityFilters.SHOW_COMPLETED));

/** Unregistering */
unsubscribe();

Source Code

/** index.js */
import { createStore } from 'redux';
import todoApp from './reducers';

let store = createStore(todoApp);