其他分享
首页 > 其他分享> > React-hooks useReducer和useContext 封装和使用

React-hooks useReducer和useContext 封装和使用

作者:互联网

一、React-hooks useReducer和useContext 封装和使用

/**
* userReducer.ts
* 数据封装:reducer
*/ 
type Actions = 'updateUserId' | 'updateToken';
export interface TAction {
  type: Actions;
  data: any;
}
export interface TState{
    userId: string;
    token:string
}
    
//---------------- 

export const initialState: TState = {
    userId: '11111',
    token: '22222',
};

export const reducer: React.Reducer<TState, TAction> = (state, action) => {
    console.log("state===",state)
    switch (action.type) {
        case 'updateUserId':
            return {
                ...state,
                userId: action.data
            };
        case 'updateToken':
            return {
                ...state,
                token: action.data
            };
        default:
            return state;
    }
}
/**
*combineReducers.ts
*reducre汇总
*/
const combineReducers = function<T>(reducers:any){
  return function(state:any, action:any): T{
    let hasChanged:any;
    const nextState = Object.keys(reducers).reduce((result, key) => {
      result[key] = reducers[key](state[key], action);
      hasChanged = hasChanged || result[key] !== state[key];
      return result;
    }, {});
    return hasChanged ? nextState : state;
  };
}

export default combineReducers;
/*
*index.ts
*入口文件:reducre入口文件
**/

import {
  initialState as userInitialState,
  reducer as userReducer,
  TState as TUserlState,
  TAction as TUserAction,
} from './userReducer';

import combineReducers from './combineReducers'

export const initialState = {
    userInfo: userInitialState
};

export type TState = {
    userInfo: TUserlState
};

export const reducer = combineReducers<TState>({
    userInfo: userReducer
});


export type TAction =  | TUserAction;

export interface TContextProps{
    state: TState;
    dispatch: React.Dispatch<TAction>;
}

二、用法

三、目录结构
在这里插入图片描述

标签:const,hooks,reducer,useReducer,React,state,export,import
来源: https://blog.csdn.net/weixin_43825389/article/details/121129137