3. storeディレクトリ

React

initialState.js

export const intialState = {
    loading: {
        state: false,
        text: ""
    },
    products: {
        list: []
    },
    users: {
        cart: [],
        customer_id: ""'
        email: "",
        isSignedIn: false,
        orders: [],
        payment_method_id: "",
        role: "",
        uid: "",
        username: ""
    }
};

管理したいstateの初期状態を書くファイルです

store.js

import { createStore as reduxCreateStore } from 'redux';
import { combineReducers } from 'redux';
import { applyMiddleware } from 'redux';
import { createLogger } from 'redux-logger';
import thunk from 'redux-thunk';
import { connectRouter, routerMiddleware } from 'connect-react-router';

import { LoadingReducer } from '../loading/reducers';
import { ProductsReducer } from '../products/reducers';
import { UsersReducer } from '../users/reducers';

export default function createStore(history) {  <--- historyには「Reactアプリ内でブラウザが今どこにいるのかの情報が入っています
    let middleWares = [routerMiddleware(history), thunk];
    if (process.env.NODE_ENV === 'development') {
        const logger = createLogger({
            collapsed: true,
            diff: true
        });
        middleWares.push(logger)
    }

    return reduxCreateStore( 
        combineReducers({  <--- storeでreducerをcombineする
            loading: LoadingReducer,
            products: ProductsReducer,
            users: UsersReducer,
            router: connectRouter(history),
        }),
        applyMiddleware(
            ...middleWares
        )
    );
}
BACK