Redux基礎④

ここでは、Container Componentを作成してやってます。

［プロジェクト名］/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>

);

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

import AppContainer from '../components/SubApp';

function App() {

  return (

    <AppContainer />

  );

}

export default App;

 

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

import store from '../index';

function SubSubApp() {

    return(

        <div>{store.getState().content}</div>

    )

}

export default SubSubApp;

 

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

import store from '../index';

import SubSubApp from '../components/SubSubApp';

function SubApp(){

    return(

      <div>

        <p>MyReact</p>

        <p>{store.getState().text}</p>

        <SubSubApp />

      </div>

    );

}

export default SubApp;

 

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

const initialState = {

    text:"Python",

    content:"Java"

}

export function texts(state = initialState) {

    return state;

}

 

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

import {connect} from 'react-redux';

import SubApp from '../components/SubApp';

function mapStateToProps(state){

    return{

        text: state.text,

        content: state.content,

    }

}

const AppContainer = connect(mapStateToProps)(SubApp);

export default AppContainer;