Redux in Russian
  • Read Me
  • Introduction
    • Motivation
    • Core Concepts
    • Three Principles
    • Prior Art
    • Learning Resources
    • Ecosystem
    • Examples
  • Basics
    • Actions
    • Reducers
    • Store
    • Data Flow
    • Usage with React
    • Example: Todo List
  • Advanced
    • Async Actions
    • Async Flow
    • Middleware
    • Usage with React Router
    • Example: Reddit API
    • Next Steps
  • Recipes
    • Configuring Your Store
    • Migrating to Redux
    • Using Object Spread Operator
    • Reducing Boilerplate
    • Server Rendering
    • Writing Tests
    • Computing Derived Data
    • Implementing Undo History
    • Isolating Subapps
    • Structuring Reducers
      • Prerequisite Concepts
      • Basic Reducer Structure
      • Splitting Reducer Logic
      • Refactoring Reducers Example
      • Using combineReducers
      • Beyond combineReducers
      • Normalizing State Shape
      • Updating Normalized Data
      • Reusing Reducer Logic
      • Immutable Update Patterns
      • Initializing State
    • Using Immutable.JS with Redux
  • FAQ
    • General
    • Reducers
    • Organizing State
    • Store Setup
    • Actions
    • Immutable Data
    • Code Structure
    • Performance
    • Design Decisions
    • React Redux
    • Miscellaneous
  • Troubleshooting
  • Glossary
  • API Reference
    • createStore
    • Store
    • combineReducers
    • applyMiddleware
    • bindActionCreators
    • compose
  • Change Log
  • Patrons
  • Feedback
Powered by GitBook
On this page
  • Dispatching Actions
  • Source Code
  • index.js
  • Next Steps
  1. Basics

Store

PreviousReducersNextData Flow

Last updated 6 years ago

In the previous sections, we defined the that represent the facts about “what happened” and the that update the state according to those actions.

The Store is the object that brings them together. The store has the following responsibilities:

  • Holds application state;

  • Allows access to state via ;

  • Allows state to be updated via ;

  • Registers listeners via ;

  • Handles unregistering of listeners via the function returned by .

It's important to note that you'll only have a single store in a Redux application. When you want to split your data handling logic, you'll use instead of many stores.

It's easy to create a store if you have a reducer. In the , we used to combine several reducers into one. We will now import it, and pass it to .

import { createStore } from 'redux'
import todoApp from './reducers'
const store = createStore(todoApp)

You may optionally specify the initial state as the second argument to . This is useful for hydrating the state of the client to match the state of a Redux application running on the server.

const store = createStore(todoApp, window.STATE_FROM_SERVER)

Dispatching Actions

Now that we have created a store, let's verify our program works! Even without any UI, we can already test the update logic.

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

// Log the initial state
console.log(store.getState())

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

// Dispatch some 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))

// Stop listening to state updates
unsubscribe()

You can see how this causes the state held by the store to change:

Source Code

index.js

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

const store = createStore(todoApp)

Next Steps

We specified the behavior of our app before we even started writing the UI. We won't do this in this tutorial, but at this point you can write tests for your reducers and action creators. You won't need to mock anything because they are just functions. Call them, and make assertions on what they return.

Before creating a UI for our todo app, we will take a detour to see .

how the data flows in a Redux application
actions
reducers
previous section
combineReducers()
createStore()
createStore()
getState()
dispatch(action)
subscribe(listener)
subscribe(listener)
pure
reducer composition