How can I use the context provider api and typescript without correcting me all the time-CodePudding

The code below throws me the error:

frontend_1  | TypeScript error in /frontend/src/State/Store.tsx(23,27):
frontend_1  | Property 'test' is missing in type 'any[]' but required in type '{ test: string; }'.  TS2741
frontend_1  | 
frontend_1  |     21 | 
frontend_1  |     22 |     return (
frontend_1  |   > 23 |         <Context.Provider value={[state, dispatch]}>
frontend_1  |        |                           ^
frontend_1  |     24 |             {children}
frontend_1  |     25 |         </Context.Provider>
frontend_1  |     26 |     )

import { createContext, useReducer } from "react";

const initialState = {
    test: "text-string"
}


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

function Store({ children }: any) {
    const [state, dispatch] = useReducer(reducer, initialState);

    return (
        <Context.Provider value={[state, dispatch]}>
            {children}
        </Context.Provider>
    )
};

export const Context = createContext(initialState);
export default Store;

I am trying to fix it for hours but whatever I tried it still throws me the same error. If somebody could help me I really would appreciate it. This example works in plain javascript like a charm so the issue only comes with typescript.

Thanks in advance!

CodePudding user response：

The type of value (an array that has state and dispatch) passed to the provider and the type of initialState (just the state) passed to createContext is different. Just make sure that these two values are the same type.

You can define interfaces for the state, action of the reducer and use them everywhere.

interface State {
  test: string;
}

interface Action {
  type: string;
  payload?: any; // update this as you like
}

const initialState = {
  test: "text-string"
};

const reducer = (state: State, action: Action) => {
  switch (action.type) {
    case "SET_PUBLIC_KEY":
      return {
        ...state,
        test: "modifed"
      };
    default:
      return state;
  }
};

// passing an array that matches the type of context's value
export const Context = createContext<[State, Dispatch<Action>]>([
  initialState,
  () => initialState
]);

function Store({ children }: any) {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <Context.Provider value={[state, dispatch]}>{children}</Context.Provider>
  );
}

const Child = () => {
  const [state, dispatch] = useContext(Context);

  return (
    <div onClick={() => dispatch({ type: "SET_PUBLIC_KEY" })}>{state.test}</div>
  );
};

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <Store>
        <Child />
      </Store>
    </div>
  );
}