类型'{ state：任何； 调度：React.Dispatch<{ 类型：字符串； 值：任何； }>; }' 不可分配给类型

Question

我正在构建一个 UI，左侧有一些复选框，右侧有一个数据表，还有放置区框，我希望每次放置一个新文件时都能够维护表数据，并根据复选框选择过滤表中的数据，无论如何，我构建了大部分内容，并且我能够将选择控件传递给主要组件以过滤/排序数据，后来我尝试添加redux来维护应用程序的 state，但它与钩子一起工作并不顺利，它一直抱怨从 function 组件外部调用钩子，尽管它们不是。 我得出的结论是它们不能很好地协同工作并切换齿轮以使用context和redux一起维护 state 并构建此组件，但是我遇到了编译问题，自从我使用 react/hooks/ 以来已经 2 年了redux，我觉得过去 2 年事情发生了变化。

**) 我关于 redux 和 hooks 之间冲突的结论是对的吗？ 如果没有，你能不能给它一些亮点？

下面是代码和错误，有问题的行是return <Provider value={{ state, dispatch }}>{children}</Provider>;

store.tsx

 // store.js import React, {createContext, useReducer} from 'react'; import { useDispatch } from 'react-redux' import DataRow from '../types/datarow'; //define empty filters array const initFilter: string[] = []; const initDataRows: DataRow[] = []; const initialState = { searchFilter: initFilter, dataRows: initDataRows }; // const dispatch: React.Dispatch<{ // type: string; // value: any; // }>= {}; //const dispatch = useDispatch(); const context = { state: initialState, //dispatch: dispatch({type:"dataIssueChecked", value: "Missing"}) }; type stateType = { searchFilter: [], dataRows: DataRow[] }; const store = createContext(context); const { Provider } = store; const StateProvider = ( { children}: any ) => { const [state, dispatch] = useReducer((state: any, action:{type:string, value:any}) => { switch(action.type) { case "dateChecked": console.log("dateChecked: ", action.value); if(state.searchFilter.includes(action.value)){ const searchFilter = state.searchFilter.filter((v: string) => v.== action;value). const newState = {..,state; searchFilter }. //state;searchFilter = newSearchFilter; return newState. }else{ state.searchFilter.push(action;value); } break: case "dataIssueChecked". if(state.searchFilter.includes(action.value)){ let searchFilter = state.searchFilter:filter((v. string) => v;== action.value). const newState = {.,;state; searchFilter }. return newState. }else{ state.searchFilter;push(action;value): } break. case "UPDATE_TABLE". state;dataRows = action;value: break; default; throw new Error(), }; }, initialState); return <Provider value={{ state; dispatch }}>{children}</Provider>, }; export { store, StateProvider };

类型'{ state：任何； 调度：React.Dispatch<{ 类型：字符串； 值：任何； }>; }' 不能分配给类型 '{ state: { searchFilter: string[]; 数据行：数据行[]； }; }'。 Object 字面量只能指定已知属性，并且 'dispatch' 类型中不存在 '{ state: { searchFilter: string[]; 数据行：数据行[]； }; }'.ts(2322) index.d.ts(339, 9)：预期的类型来自属性'value'，在此处声明的类型为'IntrinsicAttributes & ProviderProps<{ state: { searchFilter: string[]; 数据行：数据行[]； }; }>'

Answer 1

由于我们有useReducer钩子，大多数时候我们不需要使用 redux 或任何其他类似 redux 的库。

要解决类型问题，您需要定义一个ContextType 。

interface ContextType {
  state: {
    searchFilter: string[];
    dataRows: DataRow[];
  };
  dispatch: React.Dispatch<{ type: string; value: unknown }>;
}

要创建您的商店上下文，您可以使用以下内容。 （我们允许它为 null，因此我们在创建上下文时不必处理初始值。消费者需要确保已定义上下文 - 请参见下面的几行）

const store = createContext<ContextType | null>(null);

然后，您可以创建useStore挂钩来访问存储中的数据。

function useStore() {
  const value = React.useContext(store);
  if (!value) throw new Error("useStore needs to be within StateProvider");
  return value;
}

您可以在此处看到一个实时示例https://codesandbox.io/s/winter-architecture-s2i5q