Type error using useReducer and Context with TypeScript

Question

I'm trying to include Auth with useReducer and Context in a React app, but i have a type error in

<UserDispatchContext.Provider value={dispatch}>

The error is:

Type 'Dispatch<Action>' is not assignable to type '(state: User, action: Action) =>
{ id: number | null; username: string | null; email: string | null; role: 'user' | 'admin'; }'.
  Types of parameters 'value' and 'state' are incompatible.
    Property 'type' is missing in type 'User' but required in type 'Action'.

Those are my types

export interface Action { type: 'login' | 'logout' }

export interface User {
    id: number | null
    username: string | null
    email: string | null
    role: 'user' | 'admin'
}

this is Auth.tsx

import React, { useReducer, useContext } from 'react'
import { NextPage } from 'next'
import { User, Action } from '../@types/auth'

const user: User = {
    id: null,
    username: null,
    email: null,
    role: null
}

const reducer = (state: User, action: Action) => {
    switch (action.type) {
        case 'login':
            return {...state}
        default:
          return {...state, ...user}
    }
}

const UserStateContext = React.createContext<User>(user)
const UserDispatchContext = React.createContext<typeof reducer>(reducer)

export const AuthProvider: NextPage = ({ children }) => {

    const [ state, dispatch ] = useReducer(reducer, user)
    
    return (
        <UserStateContext.Provider value={state}>
            <UserDispatchContext.Provider value={dispatch}>
                {children}
            </UserDispatchContext.Provider>
        </UserStateContext.Provider>
    )
}

export const useAuth = () => useContext(UserStateContext)
export const useDispatchAuth = () => useContext(UserDispatchContext)

I have tried something but I can't figured out. Maybe I have not understood well how useReducer works.

Thanks in advance

Pat Murray · Accepted Answer · 2020-04-09 19:52:56Z

It is hard for me to debug this code just by looking at it but I am going to show you very similar code that I have in hopes that you can get something out of it. Main thing is I used typesafe-actions: https://github.com/piotrwitek/typesafe-actions

index.tsx:

import React, { createContext, useContext, useEffect, useReducer } from 'react';
import { ActionType } from 'typesafe-actions';

import * as actions from './app.actions';
import * as userActions from './user/actions';

import * as fromUser from './user/reducer';


interface State {
  user: fromUser.State,
}

const appReducer = (state: State, action: ActionType<typeof actions>) => ({
  user: fromUser.reducer(state.user, action as ActionType<typeof userActions>),
});

const initialState: State = {
  user: fromUser.initialState,
};


const StateContext = createContext(initialState);
const DispatchContext = createContext((_: ActionType<typeof actions>) => { });

interface ProviderProps { children: React.ReactNode }

export const StoreProvider: React.FC<ProviderProps> = ({ children }) => {
  const [state, dispatch] = useReducer(appReducer, initialState);

  useEffect(() => {
    dispatch(actions.appStart());
    return () => dispatch(actions.appEnd());
  }, []);

  return (
    <StateContext.Provider value={state}>
      <DispatchContext.Provider value={dispatch}>
        {children}
      </DispatchContext.Provider>
    </StateContext.Provider>
  );
};

export function useStore() {
  return useContext(StateContext);
}

export function useDispatch() {
  return useContext(DispatchContext);
}

./user/actions:

export const ADD_USER = 'user/ADD_USER';
export const addUser = (user: string) => ({
  type: ADD_USER,
  user,
} as const);

export const REMOVE_USER = 'user/REMOVE_USER';
export const removeUser = () => ({
  type: REMOVE_USER,
} as const);

./user/reducer:

import { ActionType } from 'typesafe-actions';

import * as actions from './actions';


export interface State {
  userName: string | null,
}

export const initialState: State = {
  userName: null,
};

export const reducer = (state = initialState, action: ActionType<typeof actions>): State => {
  switch (action.type) {
    case actions.ADD_USER: {
      return {
        userName: action.user,
      };
    }
    case actions.REMOVE_USER: {
      return {
        userName: null,
      };
    }
    default: return state;
  }
};

Collectives™ on Stack Overflow

Type error using useReducer and Context with TypeScript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related