5. srcディレクトリ直下

import React from 'react';
import { render }from 'react-dom';
import { Provider } from 'react-redux';
import { ConnectedRouter } from 'connected-react-router';  <--- Redux用のルーティングライブラリ
import * as History from 'history';
import createStore from './reducks/store/store';
import * as serviceWorker from './serviceWorker';
import {ErrorBoundary} from "./components/UIkit";
import './assets/reset.css'
import './assets/style.css'
import {MuiThemeProvider} from '@material-ui/core/styles';
import {theme} from './assets/theme'
import App from './App';


const history = History.createBrowserHistory();  <--- ユーザーがReactアプリ内のどこにいるのか、という情報
export const store = createStore(history);  <--- Historyと連携したstoreのデータ

render(
    <Provider store={store}>
        <ConnectedRouter history={history}>
            <MuiThemeProvider theme={theme}>
                <ErrorBoundary>
                    <App />   <--- App.jsxの内容
                </ErrorBoundary>
            </MuiThemeProvider>
        </ConnectedRouter>
    </Provider>,
    document.getElementById('root'),
)

serviceWorker.register();

import React from 'react';
import { Footer, Loading, ScrollToTop } from './components/UIKit';
import { Header } from './components/Header';
import Router from './Router';

const App = () => {
    return (
        <Loading>
            <ScrollToTop />
            <Header />
            <main className="c-main">
                <Router />    <---- Router.jsxの内容
            </main>
            <Footer />
        </Loading>
    );
}

export default App;

import React from 'react';
import { Route, Switch } from 'react-router';
import {
    CartList, CheckoutWrapper, OrderConfirm, OrderComplete, OrderHistory, Menus,
    ProductDetail, ProductEdit, ProductList, Reset, SignIn, SignUp, UserMyPage
} from './templates';
import Auth from './Auth';

const Router = () => {
    return (
        <Switch>
            <Route exact path="/signin" component={SignIn} />
            <Route exact path="/signin/reset" component={Reset} />
            <Route exact path="/signup" component={SignUp} />

            <Auth>  <--- Auth.jsxの内容（SignInしていないユーザーはこの中のRouteの内容が見れません）
                <Route exact path="(/)?" component={ProductList} />
                <Route exact path="/product/:id" component={ProductDetail} />
                <Route path="/product/edit(/:id)?" component={ProductEdit} />

                <Route exact path="/cart" component={CartList} />
                <Route exact path="/order/confirm" component={OrderConfirm} />
                <Route exact path="/order/complete" component={OrderComplete} />
                <Route exact path="/order/history" component={OrderHistory} />

                <Route exact path="/user/mypage" component={UserMyPage} />
                <Route exact path="/user/payment/edit" component={CheckoutWrapper} />
            </Auth>
        </Switch>
    );
}

export default Router;

import React, {useEffect} from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { getSignedIn } from './reducks/users/selectors';
import { listenAuthState } from './reducks/users/operations';

const Auth = ({children}) => {   <--- childrenって何？
    const dispatch = useDispatch();
    const selector = useSelector((state) => state);
    const isSignedIn = getSignedIn(selector)
    
    useEffect(() => {
        if (!isSignedIn) {
            dispatch(listenAuthState())
        }
    }, []);

    if (!isSignedIn) {
        return <></>
    } else {
        return children
    }
}

export default Auth;