[REACT] Issue with Redux data

[marciogurka]

Forum post

"Hi all,

we are facing some problems with connecting redux and axios.

we get our data from backend over an axios query.

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import axios from 'axios';
import FuseUtils from '@fuse/utils/FuseUtils';

export const getScheduler = createAsyncThunk('production/planning/getScheduler', async (params) => {
  const response = await axios.post(
    process.env.REACT_APP_API_ENDPOINT + '/api/production/planning/get-scheduler',
    params
  );
  const data = await response.data;
  return data;
});

const schedulerSlice = createSlice({
  name: 'production/planning/scheduler',
  initialState: { data: {} },
  extraReducers: {
    [getScheduler.fulfilled]: (state, action) => {
      state.data = action.payload;
    },
  },
});

export const selectScheduler = ({ schedulerApp }) => schedulerApp.scheduler;

export default schedulerSlice.reducer;

In the app we uuse useSelector to get the state from the redux store. Then we initialize the ressources, calendars, resourceTimeRanges and events with useState([])

  const rawData = useSelector(selectScheduler);
  const [resources, setResources] = useState([]);
  const [calendars, setCalendars] = useState([]);
  const [resourceTimeRanges, setResourceTimeRanges] = useState([]);
  const [events, setEvents] = useState([]);

With a useEffect we refresh the state of these variables

  useEffect(() => {
    if (rawData.data.resources) {
      setResources(rawData.data.resources.rows);
      setCalendars(rawData.data.calendars.rows);
      setResourceTimeRanges(rawData.data.resourceTimeRanges.rows);
      setEvents(rawData.data.events.rows);
    }
  }, [rawData]);

and the return value is

      <BryntumSchedulerPro
        ref={schedulerPro}
        {...schedulerConfig}
        events={events}
        resources={resources}
        calendars={calendars}
        resourceTimeRanges={resourceTimeRanges}
        // dependencies = {dependencies}
        onDataChange={onDataChange}
      />

"

[jsakalos]

1. The user's problem does not seem to be solvable by changing our code, neither core nor wrappers. It seems to be the React/Redux application problem.
2. User admits that when he uses Redux Toolkit Query (RTK), what is recommended by redux people themselves, then his app works.

Therefore, the question is whether this is really our bug, a fixable bug. We could perhaps drop a note in the React integration guid that we recommend RTK if user intends to use Redux.