React TS useContext useReducer 钩子

Question

我无法弄清楚这段代码中的类型错误是什么

import React from 'react';

interface IMenu {
  items: {
    title: string,
    active: boolean,
    label: string
  }[]
}


type Action =
  | { type: 'SET_ACTIVE', label: string }

const initialState: IMenu = {
  items: [
    { title: 'Home', active: false, label: 'home' },
    { title: 'Customer', active: false, label: 'customer' },
    { title: 'Employee', active: false, label: 'employee' },
    { title: 'Report', active: false, label: 'report' },
  ]
}

const reducer = (state: IMenu = initialState, action: Action) => {
  switch (action.type) {
    case 'SET_ACTIVE': {
      const label = action.label;
      const items = state.items.map((item) => {
        if (item.label === label) {
          return { ...item, active: true };
        }
        return { ...item, active: false }
      })
      return { items }
    }
    default:
      throw new Error();
  }
};

export const MenuContext = React.createContext(initialState);
export const MenuConsumer = MenuContext.Consumer;

export function MenuProvider(props: any) {
  const [state, dispatch] = React.useReducer(reducer, initialState)
  const value = { state, dispatch };
  console.log(value)
  return (
    <MenuContext.Provider value={value}>
      {props.children}
    </MenuContext.Provider>
  )
}

我收到的错误是这样的

    /Volumes/Tarang External/react-context-typescript/src/context/index.tsx
TypeScript error in /Volumes/Tarang External/react-context-typescript/src/context/index.tsx(49,27):
Property 'items' is missing in type '{ state: { items: { active: boolean; title: string; label: string; }[]; }; dispatch: Dispatch<{ type: "SET_ACTIVE"; label: string; }>; }' but required in type 'IMenu'.  TS2741

    47 |   console.log(value)
    48 |   return (
  > 49 |     <MenuContext.Provider value={value}>
       |                           ^
    50 |       {props.children}
    51 |     </MenuContext.Prov

谁能帮忙指出我做错了什么？我是打字稿的新手，所以如有必要请指导我。我正在尝试将状态的上下文值传递给子组件。我不确定发生了什么。这也是实现 useContext 和 useReducer 挂钩的正确方法吗？

Answer 1

I am trying to pass the context value of state and dispatch to the child component.

MenuContext 类型由 initialState 决定 - 它们与您的情况不匹配。您可以声明自定义上下文值类型：

type StoreApi = {
  state: typeof initialState
  dispatch: React.Dispatch<Action>
}

然后像这样定义MenuContext：

// undefined is just the default in case, you don't have a provider defined
export const MenuContext = React.createContext<StoreApi | undefined>(undefined)
// or if you want it more like your first example (I would prefer first variant)
export const MenuContext = React.createContext<StoreApi | typeof initialState>(initialState)

Is this also a correct way to implement useContext and useReducer hooks?

以上是初始化 React 上下文的常见模式。更多扩展点：

1.) 目前，您所有的上下文 consumers re-render each render phase，因为 value 每次都是一个新的对象引用。如果你的性能很慢（没有过早优化），memoize value:

const value = React.useMemo(() => ({ state, dispatch }), [state])

2.) 创建自定义 useMenu 挂钩，即 returns state、dispatch 和其他有用的 API 方法。

function useMenu() {
  const context = React.useContext(MenuContext);
  if (context === undefined) throw new Error(`No provider for MenuContext given`);
  const { state, dispatch } = context;
  const myApiMethod = () => dispatch({ type: "SET_ACTIVE", label: "foo" })
  return { ...context, myApiMethod };
}

const Client = () => {
  const { state, dispatch, myApiMethod } = useMenu()
  // ...
}

这样封装了MenuContext，不需要使用React.useContext(MenuContext)，客户端得到一个量身定做的API。进一步阅读：How to use React Context effectively 及其相关文章。

Answer 2

您的问题是您的上下文应该具有与 initialState 相同的类型，但是您将上下文的默认值设置为 { state, dispatch }。

这是不正确的。

要解决，请将上下文的默认类型设置为 { state, dispatch }（我认为这就是您想要的，或将上下文的默认类型设置为 typeof initialState.

这里是the solution。

React TS useContext useReducer 钩子

React TS useContext useReducer hook

types

typescript

reactjs

react-hooks