createstore

Redux

Getting StartedTutorialAPIFAQBest PracticesGitHubNeed help?

🌜

🌞

Search

Redux

• Getting Started

• Tutorial

• API

• FAQ

• Best Practices

• GitHub

• Need help?

• Introduction

  • Getting Started with Redux

  • Installation

  • Core Concepts

  • Learning Resources

  • Ecosystem

  • Examples

• Tutorials

  • Tutorials Index

  • Quick Start

  • TypeScript Quick Start

  • Redux Essentials

    • Redux Overview and Concepts

    • Redux App Structure

    • Basic Redux Data Flow

    • Using Redux Data

    • Async Logic and Data Fetching

    • Performance and Normalizing Data

  • Redux Fundamentals

    • Redux Overview

    • Redux Concepts and Data Flow

    • State, Actions, and Reducers

    • Store

    • UI and React

    • Async Logic and Data Fetching

    • Standard Redux Patterns

    • Modern Redux with Redux Toolkit

• Recipes

  • Recipes: Index

  • Configuring Your Store

  • Usage With TypeScript

  • Migrating to Redux

  • Using Object Spread Operator

  • Reducing Boilerplate

  • Server Rendering

  • Writing Tests

  • Computing Derived Data

  • Implementing Undo History

  • Isolating Redux Sub-Apps

  • Code Splitting

  • Troubleshooting

  • Structuring Reducers

    • 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

• Understanding Redux

  • Thinking in Redux

    • Motivation

    • Three Principles

    • Glossary

  • History and Design

    • Prior Art

    • Middleware

• FAQ

  • FAQ Index

  • General

  • Reducers

  • Organizing State

  • Store Setup

  • Actions

  • Immutable Data

  • Code Structure

  • Performance

  • Design Decisions

  • React Redux

  • Miscellaneous

• Style Guide

  • Style Guide: Best Practices

• API Reference

  • API Reference

  • createStore

  • Store

  • combineReducers

  • applyMiddleware

  • bindActionCreators

  • compose

• Redux Toolkit

  • Redux Toolkit: Overview

createStore(reducer, [preloadedState], [enhancer])#

Creates a Redux store that holds the complete state tree of your app. There should only be a single store in your app.

Arguments#

1. reducer (Function): A reducing function that returns the next state tree, given the current state tree and an action to handle.

2. [preloadedState] (any): The initial state. You may optionally specify it to hydrate the state from the server in universal apps, or to restore a previously serialized user session. If you produced reducer with combineReducers, this must be a plain object with the same shape as the keys passed to it. Otherwise, you are free to pass anything that your reducer can understand.

3. [enhancer] (Function): The store enhancer. You may optionally specify it to enhance the store with third-party capabilities such as middleware, time travel, persistence, etc. The only store enhancer that ships with Redux is applyMiddleware().

Returns#

(Store): An object that holds the complete state of your app. The only way to change its state is by dispatching actions. You may also subscribe to the changes to its state to update the UI.

Example#

import { createStore } from 'redux'

function todos(state = [], action) {

switch (action.type) {

case 'ADD_TODO':

return state.concat([action.text])

default:

return state

}

}

const store = createStore(todos, ['Use Redux'])

store.dispatch({

type: 'ADD_TODO',

text: 'Read the docs'

})

console.log(store.getState())

// [ 'Use Redux', 'Read the docs' ]

Copy

Tips#

• Don't create more than one store in an application! Instead, use combineReducers to create a single root reducer out of many.

• Redux state is normally plain JS objects and arrays.

• If your state is a plain object, make sure you never mutate it! For example, instead of returning something like Object.assign(state, newData) from your reducers, return Object.assign({}, state, newData). This way you don't override the previous state. You can also write return { ...state, ...newData } if you enable the object spread operator proposal.

• For universal apps that run on the server, create a store instance with every request so that they are isolated. Dispatch a few data fetching actions to a store instance and wait for them to complete before rendering the app on the server.

• When a store is created, Redux dispatches a dummy action to your reducer to populate the store with the initial state. You are not meant to handle the dummy action directly. Just remember that your reducer should return some kind of initial state if the state given to it as the first argument is undefined, and you're all set.

• To apply multiple store enhancers, you may use compose().

Previous

« API Reference

Next

Store »

Docs

• Getting Started

• Tutorial

• FAQ

• API Reference

Community

• Reactiflux Discord

• Stack Overflow

• Feedback

More

• GitHub

• 

Copyright © 2015–2021 Dan Abramov and the Redux documentation authors.