[REACT] Redux & AXIOS
Posted: Thu Jan 26, 2023 4:21 pm
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}
/>So, every time i add a new element to the array, the UI tells me all events were removed, why?
And is there something wrong in our way to bind data?
Many thanks