Redux state not updating in function component

Question

I am working on a signup React app that uses redux. Everything other thing works quite right with the exception of state update.

I've gone through several recommendations already given here and I don't seem to see what's wrong with the code.

The authAction.js

import { API_URL } from '../../../constants/constants';

const LOGIN_SUCCESSFUL = 'LOGIN_SUCCESSFUL';
const LOGIN_LOADING = 'LOGIN_LOADING';
const LOGIN_FAILED = 'LOGIN_FAILED';


const login = values => {
    let url = API_URL + 'login';
    return async (dispatch) => {
       

        dispatch({
            type: LOGIN_LOADING
        })

        const response = await fetch (url, {
            method: 'POST',
            body: JSON.stringify(values),
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            }
        });

        const data = await response.json();

        console.log(data);

        if(response.status >=200 && response.status <= 299)
        {
            sessionStorage.setItem('_token', data.data.jwt)
            dispatch({
                type: LOGIN_SUCCESSFUL,
                payload: {
                    isAuthenticated: true,
                    jwt: data.data.jwt ?? ''
                }
            });

        }



        dispatch({
            type: LOGIN_FAILED,
            payload: {
                isAuthenticated: false,
                jwt: '',
                message: data?.message ?? 'Authentication failed.'
            }
        })
    }
}

export { login, logout };

authReducer.js

const LOGIN_SUCCESSFUL = 'LOGIN_SUCCESSFUL';
const LOGIN_FAILED =  'LOGIN_FAILED';
const LOGIN_LOADING = 'LOGIN_LOADING';


const initialState = {
    jwt: '',
    isAuthenticated: false,
    message: '',
    loading: false,
    error: false,
};

const authReducer = (state = initialState, action) => {

    if(action.type === LOGIN_LOADING)
    {
        return {
            ...state,
            message: 'Authenticating...',
            loading: true
        }
    }

    if(action.type === LOGIN_SUCCESSFUL)
    {
        return {
            ...state,
            isAuthenticated: true,
            jwt: action.payload.jwt,
            message: action.payload.message,
            laoding: false,
            error: true
        }
    }

    if(action.type === LOGIN_FAILED)
    {
        return {
            ...state,
            jwt: '',
            isAuthenticated: false,
            loading: false
        };
    }

   return initialState;
}


export default authReducer;

rootReducer.js where I combined other reducers

import { combineReducers } from "redux";
import userReducer from "./users/userReducer";
import authReducer from './users/authReducer';
import signupReducer from './users/signupReducer';
import postReducer from './postReducer'

const rootReducer = combineReducers({
    user: userReducer,
    auth: authReducer,
    signup: signupReducer,
    posts: postReducer
});

export default rootReducer;

signup.js that handles the view

import {useFormik } from 'formik';
import React, { useEffect } from 'react';
import { Helmet } from 'react-helmet';
import { Link, Navigate } from 'react-router-dom';
import { useSelector, useDispatch } from 'react-redux';
import * as Yup from 'yup';
import logo from '../../assets/img/logo1.jpeg';
import Error from '../../components/forms/Error';
import LandingLayout from '../layouts/landing';
import signup from '../../redux/actions/users/signupActions';
import Toast from '../../components/alerts/Toast';

const Signup = () => {

    const {loading, error, status} = useSelector(state => state.signup);

    const dispatch = useDispatch();

    useEffect(()=>{

        if(status)
        {
            setTimeout(() => {
                return <Navigate to='/login' />
            }, 2000);
        }
    }, [dispatch, status])
...

onSubmit: (values) => {
            dispatch(signup(values));
}

...
export default Signup;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import thunk from 'redux-thunk'
import { composeWithDevTools } from 'redux-devtools-extension'
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

import rootReducer from './redux/reducers/rootReducer';

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

ReactDOM.render(
  <React.StrictMode>
      <Provider store = {store}>
          <App />
      </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

when a log the response from the API call, I get the expected response but nothing is effected on the UI.

Answer 1

Well, it appears that the error was coming from somewhere else. Just as previously stated, everything I did was quite right aside the fact that one of the reducers - userReducer - included in the rootReducer had its action creator returning the wrong payload.

I commented that out and everything else worked.

However, should subtle bug from one reducer affect the entire workings of the store?