Skip to content

Latest commit

 

History

History
92 lines (57 loc) · 5.24 KB

createStore.md

File metadata and controls

92 lines (57 loc) · 5.24 KB
Raw
id title hide_title description
createstore
createStore
true
API > createStore: creating a core Redux store

 

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.

:::danger

The original Redux core createStore method is deprecated!

createStore will continue to work indefinitely, but we discourage direct use of createStore or the original redux package.

Instead, you should use the configureStore method from our official Redux Toolkit package, which wraps createStore to provide a better default setup and configuration approach. You should also use Redux Toolkit's createSlice method for writing reducer logic.

Redux Toolkit also re-exports all of the other APIs included in the redux package as well.

See the Migrating to Modern Redux page for details on how to update your existing legacy Redux codebase to use Redux Toolkit.

:::

Arguments

  1. reducer (Function): A root reducer 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' ]

Deprecation and Alternate legacy_createStore Export

In Redux 4.2.0, we marked the original createStore method as @deprecated. Strictly speaking, this is not a breaking change, nor is it new in 5.0, but we're documenting it here for completeness.

This deprecation is solely a visual indicator that is meant to encourage users to migrate their apps from legacy Redux patterns to use the modern Redux Toolkit APIs. The deprecation results in a visual strikethrough when imported and used, like createStore, but with no runtime errors or warnings.

createStore will continue to work indefinitely, and will not ever be removed. But, today we want all Redux users to be using Redux Toolkit for all of their Redux logic.

To fix this, there are three options:

  • Follow our strong suggestion to switch over to Redux Toolkit and configureStore
  • Do nothing. It's just a visual strikethrough, and it doesn't affect how your code behaves. Ignore it.
  • Switch to using the legacy_createStore API that is now exported, which is the exact same function but with no @deprecated tag. The simplest option is to do an aliased import rename, like import { legacy_createStore as createStore } from 'redux'

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! Immutable updates require making copies of each level of data, typically using the object spread operator ( return { ...state, ...newData } ).

  • 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().