ReactアプリケーションへのReduxとRTKのインストール

このレッスンでは、ReactコンポーネントがReduxと連携して動作できるようにするパッケージReact-Reduxと、ツールのRedux Toolkit（略称RTK）をアプリケーションにインストールします。

プロジェクトを開き、ターミナルで次のコマンドを入力します：

npm install @reduxjs/toolkit react-redux

次に、アプリケーションのグローバル状態を保存するストアを作成する必要があります。まず、srcフォルダ内にappフォルダを作成し、その中にstore.jsファイルを作成します。そして、このファイルにRTKからconfigureStoreをインポートします：

import { configureStore } from '@reduxjs/toolkit'

次に、空のストアを作成し、少なくとも1つのreducerを渡します：

export default configureStore({
	reducer: {}
});

Reactコンポーネントがストアと連携できるようにするには、次の手順を実行します。すでにコードが含まれているmain.jsxファイルに移動します：

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')).render(
	<React.StrictMode>
		<App />
	</React.StrictMode>,
)

インポートに、前のステップで作成したstoreとコンポーネントProviderの行を追加します：

import store from './app/store'
import { Provider } from 'react-redux'

次に、メインコンポーネントAppをProviderでラップし、プロップとしてstoreを渡します：

<React.StrictMode>
	<Provider store={store}>
		<App />
	</Provider>
</React.StrictMode>

最後に、メインのReactコンポーネントAppに次のコードを配置します：

function App() {
	return <h2>This is my first Redux app!</h2>
}

export default App

プロジェクトを再度起動すると、ブラウザウィンドウに'This is my first Redux app!'と表示されます。有効なreducerがないという警告は、今は気にしないでください。成功しました、おめでとうございます:)。

レッスンで説明されているように、あなたのアプリケーションにReduxとRTKをインストールしてください。アプリケーションが動作することを確認してください。