({reducer, actions, defaultValue}: any)
is anticipating
a single argument with three properties. However, when you invoke it, you are providing three distinct arguments. Therefore, the correct format should be
(reducer: any, actions: any, defaultValue: any)
. Similarly, a reducer expects two arguments, so you should have
authReducer = (state: any, action: any) =>
, and so forth for several of your functions.
Now, the goal is to eliminate all instances of any and utilize actual types! Some of these types can be imported from react, while others will need to be defined by us.
The challenging part lies in guiding your context to recognize the types for your specific action creators and the arguments required by each one. This way, you can benefit from autocomplete suggestions for the actions and detect any improper calls. Yet, this requires more advanced TypeScript concepts such as generics and mapped types. So, just copy and paste this code without getting overly concerned.
import React, { useReducer, FunctionComponent, Reducer, Dispatch } from 'react';
interface DataState {
isSignedIn: boolean;
// Include any additional properties here
}
interface SignInProps {
email: string;
password: string;
}
// You have the flexibility to modify this
// It's common to use a type for `Action` that represents a union of your specific actions
interface Action {
type: string;
payload: any;
}
// Here's where things get interesting
type BoundActions<T> = {
[K in keyof T]: T[K] extends (d: Dispatch<Action>) => infer R ? R : never
}
type ContextValue<T> = {
state: DataState;
} & BoundActions<T>
export const createDataContext = <T extends {}>(reducer: Reducer<DataState, Action>, actions: T, defaultValue: DataState) => {
// The context necessitates a defaultValue
const Context = React.createContext({state: defaultValue} as ContextValue<T>);
// By assigning the type FunctionComponent to Provider, the type of children is recognized
const Provider: FunctionComponent = ({ children }) => {
const [state, dispatch] = useReducer(reducer, defaultValue);
const boundActions = {} as BoundActions<T>;
for (let key in actions) {
// @ts-ignore - We're going to ignore this to avoid confusion
boundActions[key] = actions[key](dispatch);
}
return (
<Context.Provider value={{ state, ...boundActions }}>
{children}
</Context.Provider>
);
};
return { Context, Provider };
}
const authReducer = (state: DataState, action: Action): DataState => {
switch (action.type) {
default:
return state;
}
};
const signup = (dispatch: Dispatch<Action>) => {
return async ({ email, password }: SignInProps) => {
try {
const response = await serverApi.post('/signup', { email, password });
console.log(response.data)
} catch (err) {
console.log(err.message);
}
};
}
const signin = (dispatch: Dispatch<Action>) => {
return ({ email, password }: SignInProps) => { };
}
const signout = (dispatch: Dispatch<Action>) => {
return () => { };
}
export const { Provider, Context } = createDataContext(
authReducer,
{ signin, signout, signup },
{ isSignedIn: false }
);
The purpose behind these efforts is to enable intellisense and type validation when using the context.
import React, { useContext } from 'react';
import { Provider, Context } from .... // Insert your path
const SampleComponent = () => {
// Familiarizes itself with all available properties on the context
const {state, signin, signout, signup} = useContext(Context);
const handleClick = () => {
// Recognizes the requirement for email and password in these calls
signin({email: '', password: ''});
signup({email: '', password: ''});
// Understands that this call needs no arguments
signout();
}
return (
<div>{state.isSignedIn ? "Signed In!" : "Not Signed In"}</div>
)
}
const SampleApp = () => (
<Provider>
<SampleComponent/>
</Provider>
)