useSelector is not giving the value after useDispatch

Question

I have an api which gives me the result, and I can see the data in my console, but I'm not able to get it in useSelector.

 import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
import axios from "axios";
import { useNavigate } from "react-router-dom";

const initialState = {
    value: [],
    status: 'idle',
};

    export const fetchEmployeesThunk = createAsyncThunk(
        'employeelist/fetchEmployeesThunk',
        async () => {
            const res = await axios.get('https://localhost:7168/Employee/GetEmployeeList').then(
                (result) => result.data
            )
            return res;
        })

export const EmployeeListSlice = createSlice({
    name: "employeelist",
    initialState: initialState,

    reducers: {

        initialFetch: (state, action) => {
            state.value = action.payload;
        },

        updateEmployeeList: (state, action) => {
            state.value = action.payload;
        },
    },

    extraReducers: (builder) => {
        builder

            .addCase(fetchEmployeesThunk.pending, (state, action) => {   
                state.status = 'idle';
                state.value = [];
            })

            .addCase(fetchEmployeesThunk.fulfilled, (state, action) => {
                console.log(action.payload);
                state.value = action.payload;
                state.status = 'finished';
            })
    },
});

export const getEmployeeListData = (state) => state.employeelist.value;

export const { updateEmployeeList, initialFetch } = EmployeeListSlice.actions;
export default EmployeeListSlice.reducer;

export function fetchEmployees() {
    return async (dispatch) => {
        const res = await axios.get('https://localhost:7168/Employee/GetEmployeeList').then(
            (result) => result.data
        )
        dispatch(updateEmployeeList(res));
    }
}

as you can see I tried using both thunk and creating a function and dispatching the data internally to an action, i was able to update the state but i'm not able to get the value through selector, I have a table which takes an array

export default function HomePage() {
const dispatch = useDispatch();
  const [tempRows, setTempRows] = useState(useSelector((state) => state.employeelist.value));
  const [rows, setTableRows] = useState(useSelector((state) => state.employeelist.value));

 useEffect(() => {
    //dispatch(fetchEmployees());
    dispatch(fetchEmployeesThunk());
  }, rows);

}

This is giving me empty array, but lets say if I change something then reload like a hot reload it returns the data now, any help would be deeply appreciated

score 1 · Accepted Answer · answered Jun 27 '22 at 05:34

1

Please do

const rows = useSelector((state) => state.employeelist.value)

and not

 const [rows, setTableRows] = useState(useSelector((state) => state.employeelist.value));

The latter means "use local state that is once initialized from the Redux store". It will only change if setTableRows is called, not if the Redux store changes.

answered Jun 27 '22 at 05:34

phry

35,762
5
67
81

but what if I need to update the rows object again?, since it being a constant I'm not able to do so? – Venky Jun 27 '22 at 05:38
You would have to change it in the Redux store, by dispatching an action. You will have to decide "is this local and will never change on a global change" or "is this global and I need to dispatch an action to change it". But right now you're asking "why doesn't it change when global state changes" and all I can say is "because of the `useState`". – phry Jun 27 '22 at 05:43
understood, i found a way – Venky Jun 28 '22 at 12:45

useSelector is not giving the value after useDispatch

1 Answers1