I am facing a challenging issue with implementing a Material UI slider in conjunction with Redux. Below is the code for the slider component:
import { Slider } from '@material-ui/core'
const RangeSlider = ({handleRange, range}) => {
const handleChange = (event, newValues) => {
handleRange(newValues)
}
return (
<Slider
value={range}
onChange={handleChange}
valueLabelDisplay="auto"
aria-labelledby="range-slider"
min={0}
max={100}
/>
)
}
export default RangeSlider
Further down below is the filter component containing Redux logic:
import {
Button,
Typography as Tp,
Select,
MenuItem,
} from "@material-ui/core";
import { ExpandMore } from "@material-ui/icons";
import { RangeSlider } from "../components";
import { useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { filterUpdate } from "../redux/actions/filter";
const Filter = ({ models }) => {
// Logic here...
};
export default Filter;
The Redux action logic is defined as follows:
import { createAction } from '@reduxjs/toolkit'
import types from '../types'
export const filterUpdate = createAction(types.FILTER_UPDATE)
Finally, here is the Reducer implementation:
import { createReducer } from '@reduxjs/toolkit'
import { filterUpdate } from '../actions/filter'
const reducer = createReducer({
range: [0,60],
model: 'None'
}, {
[filterUpdate]: (state, action) => {
state.range = action.payload.range
state.model = action.payload.modelSelected
}
})
export default reducer
I encountered an error when integrating the Redux logic into my application. This error seems to be occurring randomly and inconsistently. How can I troubleshoot this issue? Any advice would be greatly appreciated.
Thank you in advance.