3:React-hooks-ts-antd项目-redux 全局Loading

1:安装相应插件

yarn add redux --save
yarn add react-redux --save
yarn add @types/react-redux --save

2:应用Redux,以全局Loading为例

1:创建事件类型

const actionTypes={
    LOADING_VISIBLE:"LOADING_VISIBLE",
}
export {actionTypes};

2:创建reducer

import {actLoadingTodo} from "../action/action.loading";
import {actionTypes} from "../action/type/action.types";
export interface IstoreLoading {
    type:string,
    loading:boolean,
    info?:string
}
let initState:IstoreLoading={
    type:"",
    loading:false,
    info:"加载中",
}
export function reducerLoading(state=initState,action:actLoadingTodo) {
    switch (action.type) {
        case actionTypes.LOADING_VISIBLE:
            return {
                ...state,
                loading:action.loading,
                info:action.info,
            };
        default:
            return {
                ...state
            };
    }
}

3：创建Action

import {actionTypes } from "./type/action.types";

export interface typeLoadingVisible{
    type:string,
    loading:boolean,
    info?:string,                   //显示内容，默认为“加载中”
}

function ActLoadingVisible(loading:boolean,info:string="加载中") {
    return {
        type:actionTypes.LOADING_VISIBLE,
        loading:loading,
        info:info,
    }
}
export type actLoadingTodo=typeLoadingVisible;
export {ActLoadingVisible}

4：创建rootReducer,集成所有reducer

import {combineReducers} from "redux";
import {reducerLoading} from "./reducer.loading";
export const rootReducer=combineReducers({
    reducerLoading,
});
export type AppState=ReturnType<typeof rootReducer>;

5：创建Store,包括redux-devtools配置

import {createStore,compose} from "redux";
import {rootReducer} from "./reducer/rootReducer";
declare global {
    interface Window {
        __REDUX_DEVTOOLS_EXTENSION_COMPOSE__?: typeof compose;
    }
}
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store=createStore(
    rootReducer,composeEnhancers()
)
export {store};

如何集成了redux-thunk或者saga等redux第三方库，配置如下

import {createStore, compose, applyMiddleware} from "redux";
import {rootReducer} from "./reducer/rootReducer";
import thunk from "redux-thunk";
declare global {
    interface Window {
        __REDUX_DEVTOOLS_EXTENSION_COMPOSE__?: typeof compose;
    }
}
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const enchancer=composeEnhancers(applyMiddleware(thunk));
const store=createStore(
    rootReducer,enchancer
)
export {store};

6:创建全部Loading组件，延迟显示加载效果的时间为0.5秒，防止显示时间过短出现闪烁

import React from "react";
import {useSelector} from "react-redux";
import {AppState} from "../../redux/reducer/rootReducer";
import {Spin} from "antd";

export function CommonLoading(props:any) {
    const loading=useSelector((state:AppState)=>state.reducerLoading.loading);
    const info=useSelector((state:AppState)=>state.reducerLoading.info);
    return(
        <div>
            <Spin tip={info} size="large" spinning={loading} delay={500}>
                {props.children}
            </Spin>
        </div>
    )
}

使用方式在根页面中添加该组件

<CommonLoading>
    <Root/>
</CommonLoading>

7：在根目录下的index.tsx中引入store

ReactDOM.render(
  <React.StrictMode>
      <Provider store={store}>
          <Root />
      </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

8:Loading显示和隐藏方法

store.dispatch(true);                    显示Loading
store.dispatch(true,"美女来了");          显示Loading,并修改info

store.dispatch(false);                   隐藏Loading