Redux基礎②

さて、index.jsを下記のようにしていきます。

［プロジェクト名］/src/index.js

import React from 'react';

import ReactDOM from 'react-dom/client';

import App from './App';

import {createStore} from 'redux';

import {Provider} from 'react-redux';

const store = createStore(/* reducer */);

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(

  //<React.StrictMode>

   <Provider store={store}>

      <App />

   </Provider>

  //</React.StrictMode>

);

解説ですが、

createStoreメソッドを使用して、storeを作成してます。

stateを格納するstoreから、stateを気軽に利用できるために、Providerというものを使用してます。Appの親コンポーネントとして、Providerを設定してます。

ここで、createStoreメソッドは、引数が必ず必要であり、引数はreducerというものです。たいてい名は体を表しますが、このreducerというのは、単語の意味を調べていくとどつぼにはまるのでお勧めしません。

stateを変更しないアプリケーションなら、reducerを作成するときに、その引数はstateだけでよいです。はじめはそのようにしていき、そのあとに、引数をstate と actionにしてやっていきます。

さて、ここでファイル管理についても最低限必要です。

index.jsはそのままとして、App.jsは、［プロジェクト名］/src/componentsに移動してください。そのさいに、自動import変更も『はい』にしておいてください。

では次回で、Reducerを、［プロジェクト名］/src/reducersフォルダ内に作成していきます。