Day 18 终於写了一个测Provider的最初版

来我们今天先写一个简单的Provider，这个Provider没有做效能优化，也没有把hook集结在一起就一个很单纯的Provider，然後ts的型别部分，因为快速写给大家看先用any带过，但记得在写的时候不要用any来写，不然这样会失去typescript本身带来的优点．

sample code:

import { createContext, Dispatch, useReducer, ReactNode } from 'react';

type IContextType = {
  state: {
    name: string;
  };
  dispatch: Dispatch<any>;
};

type UserType = {
  children: ReactNode;
};

export const NameContext = createContext<IContextType>({} as IContextType);
const { Provider } = NameContext;

const reducer = (state: any, action: any) => {
  switch (action.type) {
    case 'set':
      return {
        ...state,
        name: action.payload
      };
    default:
      return state;
  }
};

const UserProvider: React.FC<UserType> = ({ children }) => {
  const [state, dispatch] = useReducer(reducer, {
    name: 'hello'
  });
  const value = { state, dispatch };
  return <Provider value={value}>{children}</Provider>;
};

export { UserProvider };

然後我们用一个父层元件来wrap住一个Provider

import { UserProvider } from '@contexts/nameContext';
import Name from './Name';

const Prac = () => {
  return (
    <UserProvider>
      <Name />
    </UserProvider>
  );
};

export default Prac;

接下来我们去Name component

import { useContext } from 'react';
import { NameContext } from '@contexts/nameContext';

const Name = () => {
  const { state, _ } = useContext(NameContext);
  const { name } = state;

  return <div>{name}</div>;
};

export default Name;

接下来我们来写一个最简单的测试案例

import { render, screen, act } from '@testing-library/react';
import { UserProvider } from '@contexts/nameContext';
import Name from '../Name';

test.only('should get name from context', async () => {
  render(
    <UserProvider>
      <Name />
    </UserProvider>
  );
  const getName = screen.queryByText(/hello/i);

  expect(getName).toBeTruthy();
});

在render的时候包住Name component我们就可以在Name的元件里接收到context所回传的值

接下来几天会写别种wrap Provider的方式