8. loadingディレクトリ

React

actions.js

export const HIDE_LOADING = "HIDE_LOADING";
export const hideLoadingAction = () => {
    return {
        type: "HIDE_LOADING",
        payload: {
            state: false,
            text: ""
        }
    }
};

export const SHOW_LOADING = "SHOW_LOADING";
export const showLoadingAction = (text= "loading...") => {
    return {
        type: "SHOW_LOADING",
        payload: {
            state: true,
            text: text
        }
    }
};

reducers.js

import * as Actions from './actions';
import {initialState} from '../store/initialState';

export const LoadingReducer = (state = initialState.loading, action)  => {
    switch (action.type) {
        case Actions.HIDE_LOADING:
            return {
                ...state,
                ...action.payload
            };
        case Actions.SHOW_LOADING:
            return {
                ...state,
                ...action.payload
            };
        default:
            return state
    }
};

selectors.js

import { createSelector } from "reselect";

const loadingSelector = (state) => state.loading;

export const getLoadingState = createSelector(
    [loadingSelector],
    state => state.state
);

export const getLoadingText = createSelector(
    [loadingSelector],
    state => state.text
)
BACK