［プロジェクト名］/src/components/App.js
import store from '../index';
function App() {
return (
<div>
<p>MyReact</p>
<p>{store.getState().text}</p>
</div>
);
}
export default App;
［プロジェクト名］/src/reducers/text.js
const initialState = {
}
export function texts(state = initialState){
return state;
}
［プロジェクト名］/src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './components/App';
import {createStore} from 'redux';
import {Provider} from 'react-redux';
import {texts as reducer} from './reducers/text';
const store = createStore(reducer);
export default store;
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
//<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
//</React.StrictMode>
);
解説ですが、
Reducerであるtext.jsを作成しました。
index.jsでは、reducerとしてimportしてます。
storeフォルダ作成はあまり一般的でないため、そうはせず、代わりに、
index.jsで作成したstoreをexportして、ほかのファイルでも使用できるようにしてます。
毎回、store.getState().text
を使用してもよいのですが、これを改善するために、
mapStateToPropsメソッドという名は体をあらわすメソッドを使用します。
これをどこで使用するかという問題があります。
ReactにReduxを導入する際に、表示＋最低限の機能のApp.jsに加え、Reduxと結合するためのContainer Componentを作成するのが通例です。
次のRedux基礎④はそのようにしてますが、それ以降は作成していてややこしくなることに気づいたので、わかりやすいようにするために、分けずに、すべての機能と表示をApp.jsに持たせて書いてます。
参考HP：
日本一わかりやすいReact-Redux入門#10...Storeと接続されたコンテナーコンポーネントを作ろう - YouTube
それでは次回mapStateToPropsメソッドを使用していきます。
