メインコンテンツへスキップ

createStore(reducer, preloadedState?, enhancer?)

アプリケーションの完全な状態ツリーを保持する Redux ストアを作成します。アプリケーションにはストアは1つだけである必要があります。

危険

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

createStore は無期限に動作し続けますが、createStore またはオリジナルの redux パッケージの直接使用は推奨しません。

代わりに、公式の Redux Toolkit パッケージの configureStore メソッドを使用する必要があります。このメソッドは、より良いデフォルトのセットアップと構成方法を提供するために createStore をラップしたものです。また、reducerロジックを記述するには、Redux Toolkit の createSlice メソッドを使用する必要があります。

Redux Toolkit は、redux パッケージに含まれる他のすべての API も再エクスポートします。

既存のレガシー Redux コードベースを Redux Toolkit を使用するように更新する方法の詳細については、モダン Redux への移行のページを参照してください。

引数​

  1. reducer (関数): 現在の状態ツリーと処理するアクションが与えられた場合に、次の状態ツリーを返すルートreducer関数です。

  2. [preloadedState] (任意): 初期状態。ユニバーサルアプリでサーバーから状態をハイドレートしたり、以前にシリアライズされたユーザーセッションを復元するために、必要に応じて指定できます。 combineReducers で reducer を作成した場合、これはそれに渡されたキーと同じ形状のプレーンオブジェクトである必要があります。それ以外の場合は、reducer が理解できるものを自由に渡すことができます。

  3. [enhancer] (関数): ストアエンハンサー。ミドルウェア、タイムトラベル、永続化などのサードパーティ機能でストアを拡張するために、必要に応じて指定できます。 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 ロジックに Redux Toolkit を使用してもらいたいと考えています。

これを修正するには、3つのオプションがあります

  • Redux Toolkit と configureStore に切り替えるという、私たちの強い提案に従ってください
  • 何もしないでください。これは単なる視覚的な取り消し線であり、コードの動作には影響しません。無視してください。
  • @deprecated タグのない、まったく同じ関数である、現在エクスポートされている legacy_createStore API を使用するように切り替えます。最も簡単なオプションは、import { legacy_createStore as createStore } from 'redux' のように、エイリアスインポートの名前を変更することです。

ヒント​

  • アプリケーションで複数のストアを作成しないでください！代わりに、combineReducers を使用して、多数のreducerから単一のルートreducerを作成します。

  • Redux の状態は通常、プレーンな JS オブジェクトと配列です。

  • 状態がプレーンオブジェクトの場合は、決して変更しないようにしてください！イミュータブルな更新には、通常、オブジェクトの展開演算子（return { ...state, ...newData }）を使用して、データの各レベルのコピーを作成する必要があります。

  • サーバーで実行されるユニバーサルアプリの場合は、分離されるように、リクエストごとにストアインスタンスを作成します。サーバーでアプリをレンダリングする前に、ストアインスタンスにいくつかのデータフェッチアクションをディスパッチし、それらが完了するまで待機します。

  • ストアが作成されると、Redux はダミーアクションをreducerにディスパッチして、ストアに初期状態を設定します。ダミーアクションを直接処理することを意図しているわけではありません。reducerに最初に引数として与えられた状態が undefined の場合は、何らかの初期状態を返す必要があることを覚えておいてください。これで準備完了です。

  • 複数のストアエンハンサーを適用するには、compose() を使用できます。