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

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

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

terminalnpm install @reduxjs/toolkit react-redux

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

app/store.jsimport { configureStore } from '@reduxjs/toolkit'

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

app/store.jsexport default configureStore({
  reducer: {}
});

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

main.jsximport 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の行を追加します：

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

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

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

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

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

export default App

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