Search code examples
reactjsreduxredux-toolkit

rtk createAsyncThunk doesnt update the state

I am trying to auth session by random user with http get request and createAsyncThunk. fetching the user data in App.js on mount hook. I can see the get request in my network and the new fetched state in redux dev tool, but my TopBar.js useSelector return the initial state before the fetch.

TopBar.js user log:

enter image description here

App.js:

  const dispatch = useDispatch();

  useEffect(() => {
   
    dispatch(fetchRandomUserData())
    
  }, [dispatch]);

authSlice.js:

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';

const initialState = {
  isLoggedIn: true,
  user: {},
  loading: false,
  error: null,
};

export const fetchRandomUserData = createAsyncThunk(
  'auth/fetchRandomUser',
  async () => {
    try {
      const response = await fetch('https://randomuser.me/api/');
      const data = await response.json();
      return data.results[0];
    } catch (error) {
      throw Error(error);
    }
  }
);

const authSlice = createSlice({
  name: 'auth',
  initialState,
  reducers: {
    logout(state, action) {
      state.isLoggedIn = false;
    },
  },
  extraReducers: {
    [fetchRandomUserData.pending]: (state, action) => {
      state.loading = true;
      state.error = null;
    },
    [fetchRandomUserData.fulfilled]: (state, action) => {
      console.log("action.payload",action.payload);
      state.user = action.payload;
      state.loading = false;
    },
    [fetchRandomUserData.rejected]: (state, action) => {
      state.error = action.error.message;
      state.loading = false;
    },
  },
});

export const { logout } = authSlice.actions;

export default authSlice.reducer;

store.js

import { configureStore } from '@reduxjs/toolkit';
// import booksReducer from './reducers/booksReducer';
import booksReducer from './slices/bookSlice';
import authReducer from './slices/authSlice';

const store = configureStore({
  reducer: { books: booksReducer, auth: authReducer },
});

export default store;

TopBat.js:

export default function TopBar(): JSX.Element {

 
  const user = useSelector((state: any) => state.auth);
  console.log("topbar",user); // returns the initial state





//....
Solution

  • Please make sure that you update react-redux to version 8 if you are using react 18. There are known cases where components just stop updating if you are using react-redux 7 and lower with react 18.