`createStore(reducer, preloadedState?, enhancer?)`

アプリケーション全体の状態ツリーを保持するReduxストアを作成します。アプリケーション内に存在するストアは単一であるべきです。

危険

ReduxコアのオリジナルcreateStoreメソッドは非推奨です!

createStoreは引き続き機能しますが、createStoreやオリジナルreduxパッケージの直接利用は推奨しません。

代わりに公式Redux ToolkitパッケージのconfigureStoreメソッドを使用してください。これはcreateStoreをラップし、より優れたデフォルト設定を提供します。またreducerロジック記述にはRedux ToolkitのcreateSliceメソッドを利用してください。

Redux Toolkitはreduxパッケージの全APIも再エクスポートします。

既存のレガシーReduxコードをRedux Toolkitに移行する方法はMigrating to Modern Reduxページを参照してください。

引数

reducer (Function): 現在の状態ツリーと処理対象のアクションを受け取り、次の状態ツリーを返すルートreducer関数
[preloadedState] (any): 初期状態。ユニバーサルアプリでサーバーからの状態ハイドレーションや、シリアライズ済みユーザーセッションの復元に使用できます。combineReducersで生成したreducerの場合、渡されたキーと同じ構造を持つプレーンオブジェクトである必要があります。それ以外の場合はreducerが理解できる任意の型を渡せます。
[enhancer] (Function): ストアエンハンサー。ミドルウェアやタイムトラベル、永続化などサードパーティ機能でストアを拡張する場合に指定します。Reduxに同梱されている唯一のストアエンハンサーはapplyMiddleware()です。

戻り値

(Store): アプリケーション全体の状態を保持するオブジェクト。状態変更はアクションのディスパッチでのみ可能です。状態変化を監視してUI更新するには購読します。

例

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' ]

非推奨化と代替`legacy_createStore`エクスポート

Redux 4.2.0でオリジナルcreateStoreメソッドを@deprecatedとマークしました。厳密には破壊的変更ではなく、5.0での新機能でもありませんが、完全性のためにここに記載します。

この非推奨化は純粋に視覚的指標であり、レガシーReduxパターンから現代的なRedux Toolkit APIへの移行を促すものです。インポート時や使用時に~~createStore~~のように取り消し線表示されますが、ランタイムエラーや警告は発生しません。

createStoreは無期限に機能し続け、削除されることはありません。しかし現在、全てのReduxユーザーにRedux Toolkitの利用を推奨しています。

対応方法は3つあります：

Redux ToolkitとconfigureStoreへの移行に関する強い推奨に従う
何もしない。これは単なる視覚的な取り消し線であり、コードの動作には影響しません。無視しても構いません。
代わりにエクスポートされている legacy_createStore API を使用する方法です。これは全く同じ機能ですが @deprecated タグが付いていません。最も簡単な方法はエイリアスインポートを使用することです：import { legacy_createStore as createStore } from 'redux'

活用のヒント

アプリケーション内で複数のストアを作成しないでください！代わりに combineReducers を使用して、複数のリデューサーから単一のルートリデューサーを作成します。
Redux の状態(state)は通常、プレーンな JavaScript オブジェクトと配列で構成されます。
状態がプレーンオブジェクトの場合、決して直接変更しないでください！不変(immutable)な更新を行うには、通常オブジェクトスプレッド構文 (return { ...state, ...newData }) を使用してデータの各レベルをコピーする必要があります。
サーバー上で実行されるユニバーサルアプリ(SSR)では、リクエストごとに独立したストアインスタンスを作成します。データ取得アクションをストアインスタンスにディスパッチし、それらが完了するのを待ってからサーバー上でアプリをレンダリングします。
ストア作成時、Redux は初期状態を設定するためにダミーアクションをリデューサーにディスパッチします。このダミーアクションを直接処理する必要はありません。リデューサーの最初の引数として渡される状態が undefined の場合、何らかの初期状態を返すように実装してください。
複数のストアエンハンサーを適用するには compose() を使用できます。

引数​

戻り値​

例​

非推奨化と代替legacy_createStoreエクスポート​

活用のヒント​

引数

戻り値

例

非推奨化と代替`legacy_createStore`エクスポート

活用のヒント