/Javascript/React/Type '{ GlobalState: any; Dispatch: React.Dispatch<any>; }' is not assignable to type 'null'

Type '{ GlobalState: any; Dispatch: React.Dispatch<any>; }' is not assignable to type 'null'

Type '{ GlobalState: any; Dispatch: React.Dispatch; }' is not assignable to type 'null'

Since we have the useReducer hook, most of the time we do not need to use redux, or any other redux-like libraries.

To fix the issue with types, you need to define a ContextType.
===========
interface ContextType {
  state: {
    searchFilter: string[];
    dataRows: DataRow[];
  };
  dispatch: React.Dispatch<{ type: string; value: unknown }>;
}
========
To create your store context you can use the following. (We allow it to be null, so we do not have to deal with initial value when creating the context. The consumer will need to make sure that the context has been defined - see few lines below)
===============
const store = createContext<ContextType | null>(null);
===============
You can then create your useStore hook to access data from the store.
============
function useStore() {
  const value = React.useContext(store);
  if (!value) throw new Error("useStore needs to be within StateProvider");
  return value;
}

Source: stackoverflow.com

Similar codes

4 votes176 views2 answers
HandleClick react
Javascript React
0 vote168 views2 answers
React materialize cdn
Javascript React
0 vote182 views3 answers
Set bg image in react
Javascript React
0 vote166 views1 answer
React fetch request with content type x-www-form-urlencoded
Javascript React
0 vote185 views1 answer
Storybook react router
Javascript React
0 vote153 views1 answer
Format react code in visual studio code
Javascript React
0 vote173 views1 answer
Ui5 React bind element
Javascript React
0 vote206 views1 answer
Add Navbar to React Redux CRUD App
Javascript React
0 vote166 views1 answer
Getting state in react-router-dom v6
Javascript React
0 vote179 views1 answer
Row smaller than the container bootstrap react
Javascript React