如何使用带有 RTK 查询的 useEffect 挂钩更新 state？

Question

I want to update my state in reducer when GET call returns data successfully. I am dispatching list of employees using useEffect but something is not going right.

My employeesList:[] is going undefined in Employees component.

employeeApiSlice.js

import { apiSlice } from "../../app/api/apiSlice";

export const employeesApiSlice = apiSlice.injectEndpoints({
    endpoints: (builder) => ({
        getEmployees: builder.query({
            query: () => ({
                url:'/protected/employee'
            }),
            keepUnusedDataFor: 5
        })
    }),
});

export const { useGetEmployeesQuery } = employeesApiSlice;

employeesSlice.js

import {createSlice} from "@reduxjs/toolkit";

const initialState = {
    employeesList: []
};

export const employeesSlice = createSlice({
    name: 'employees',
    initialState,
    reducers: {
        storeEmployees: (state, action) => {
            state.employeesList = action.payload;
        },
    }
});

export const { storeEmployees } = employeesSlice.actions;
export default employeesSlice.reducer;

employees.js component

import React, { useEffect } from 'react';
import {Table} from "react-bootstrap";

import { useDispatch, useSelector } from "react-redux";
import { useGetEmployeesQuery } from "./employeesApiSlice";
import { storeEmployees } from "./employeesSlice";

function Employees(){

    const dispatch = useDispatch();
    const { data, isLoading, isSuccess, isError, error } = useGetEmployeesQuery();

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

    
    const { employeesList } = useSelector(state => state.employees);

    return (
                <Table size='sm' striped bordered hover responsive>
                    <thead>
                    <tr>
                        <th>No</th>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Position</th>
                        <th>Record Created</th>
                        <th>Record Updated</th>
                    </tr>
                    </thead>
                    <tbody>
                    {employeesList.map((employee, i) => {
                        return (
                            <tr key={i}>
                                <td>{i+1}</td>
                                <td>{employee.firstName}</td>
                                <td>{employee.lastName}</td>
                                <td>{employee.position}</td>
                                <td>{employee.recordCreatedAt}</td>
                                <td>{employee.recordUpdatedAt}</td>
                            </tr>
                        )
                    })}
                    </tbody>
                </Table>
            )
}

export default Employees;

Answer 1

You would not use the detour with the component and useEffect , you can just add an extraReducer to your slice.

export const employeesSlice = createSlice({
  name: "employees",
  initialState,
  reducers: {
    storeEmployees: (state, action) => {
      state.employeesList = action.payload;
    },
  },
  extraReducers: (builder) => {
    builder.addMatcher(
      api.endpoints.getEmployees.matchFulfilled,
      (state, action) => {
        state.employeesList = action.payload;
      }
    );
  },
});

That said, you should probably not copy RTK Query state into a slice . As you will lose out on a lot of RTK Query features and things might run out of sync. Usually, you should keep RTK Query state just in RTK Query - and call useGetEmployeesQuery in all components where you need that data. That's what it is designed for.