React typescript redux reducer type 'never'

I want to use ‘useSelector’ to select proper state of rootStore, but can’t get state properly. The reason is auth reducer of RootState gives me type never.

How can I access any values from the user object properly?

My store looks like this :

export const store = createStore(
  rootReducer,
  composeWithDevTools(applyMiddleware(thunk))
);

export const persistor = persistStore(store);

export default { store, persistor};

// Infer the `RootState` and `AppDispatch` types from the store itself
export type RootState = ReturnType<typeof store.getState>;

export type RootStore = ReturnType<typeof rootReducer>

export type AppDispatch = typeof store.dispatch;

My auth reducer looks like this :

import {
  LOGIN_SUCCESS,
  LOGIN_FAIL,
  LOGIN_REQUEST,
  LoginDispatchTypes,
} from "../actions/types";
import { User } from "../types/index";

interface initialStateI {
  token: string;
  isAuthenticated: boolean;
  isLoading: boolean;
  user?: User;
  error: string;
}

const initialState = {
  token: "",
  isAuthenticated: false,
  isLoading: false,
  error: "",
};
export default function (
  state: initialStateI = initialState,
  action: LoginDispatchTypes
) {
  switch (action.type) {
    case LOGIN_REQUEST:
      return {
        ...state,
        isLoading: true,
      };
    case LOGIN_SUCCESS:
      return {
        ...state,
        isAuthenticated: true,
        isLoading: false,
        user: action.payload.user,
        token: action.payload.access_token,
        error: null,
      };
    case LOGIN_FAIL:
      return {
        ...state,
        isAuthenticated: false,
        token: null,
        user: null,
        error: action.payload.message,
      };

    default:
      return state;
  }
}

My action looks like this :

export const LOGIN_SUCCESS = "LOGIN_SUCCESS";
export const LOGIN_FAIL = "LOGIN_FAIL";
export const LOGIN_REQUEST = "LOGIN_REQUEST";
import { User } from "../types/index";

export interface LoginSuccess {
  type: typeof LOGIN_SUCCESS;
  payload: {
    expires_in: number;
    user: User;
    access_token: string;
    token_type: string;
  };
}

export interface LoginFail {
  type: typeof LOGIN_FAIL;
  payload: {
    message: string;
  };
}

export interface LoginRequest {
  type: typeof LOGIN_REQUEST;
}

export type LoginDispatchTypes = LoginRequest | LoginFail | LoginSuccess;

This is how i try to display the user details on my view :

  const { user : currentUser} = useSelector((state:RootState) => state.auth);

Also the type user is in this format:

export interface User {
  email: string;
  author_id: number;
}

Any advice or recommendations/useful links on how to access data from state will be highly appreciated.

Hey,

First of all, it would be a lot easier if you can put this in a repo, especially if you can mock the services so we can try it out.

Rather than show currentUser.created_at, how about JSON.stringify(currentUser.created_at), just to see what is going on. Also, after your selector, what does currentUser log out as?

Your selector, is that selecting the “user” or the state of “auth”?

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.