CODEWITHSUNDEEP
reactjsredux-thunkredux-toolkitredux-reducers
Venky
Venky

Reputation: 2057

useSelector is not giving the value after useDispatch

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

Upvotes: 0

Views: 1845

Answers (1)

phry
phry

Reputation: 44256

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.

Upvotes: 1

Related Questions