关于数据流的实践记录

import React, { createContext, useContext, useReducer } from 'react';

/**
 * 购物车数据list
 */
export interface IShopping {
  addTime: number;
  duration: number;
  encryptId: string;
  format: string;
  materialId: string;
  mediaType: string;
  offset: number;
  plat: string;
  previewUrl: string;
  source: number;
  thumbnail: string;
  title: string;
  endTime?: number;
  startTime?: number;
}

interface IState {
  shoppingList: IShopping[];
}

export interface updateShoppingCarAction {
  type: 'update';
  data: IShopping[];
}

export type shoppingAction = updateShoppingCarAction;

interface IStoreContext {
  shoppingState: IState;
  dispatch: React.Dispatch<shoppingAction>;
}

const initialState: IState = { shoppingList: [] };
const shoppingContext = createContext({} as IStoreContext);

const { Provider } = shoppingContext;

const ShoppingStateProvider = ({ children }: { children: JSX.Element }) => {
  const reducer = (state: IState, action: shoppingAction) => {
    switch (action.type) {
      case 'update':
        return { ...state, shoppingList: action.data };
      default:
        return state;
    }
  };
  const [shoppingState, dispatch] = useReducer(reducer, initialState);

  return <Provider value={{ shoppingState, dispatch }}>{children}</Provider>;
};

// function
function useShopping() {
  const context = useContext(shoppingContext);
  if (context === undefined) {
    throw new Error('useShopping must be used within a ShoppingProvider');
  }
  return context;
}

// class
function ShoppingConsumer({ children }: { children: any }) {
  return (
    <shoppingContext.Consumer>
      {(context) => {
        if (context === undefined) {
          throw new Error(
            'ShoppingConsumer must be used within a ShoppingProvider'
          );
        }
        return children(context);
      }}
    </shoppingContext.Consumer>
  );
}

export { ShoppingStateProvider, useShopping };