my code is long, and repetetive. I should use helper function to cut it and make it more maintainable and readable. I am a React beginner and I have a question. Should I do most of this logic with helpers functions in seperate file with actions or inside slice?
component:
const FilterItems: React.FC<FuncProps> = (props) => {
const dispatch = useDispatch();
const onChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
e.preventDefault();
const content = e.target.value;
dispatch(
recipeAction.setFilterType({
type: props.type,
set: e.target.checked,
content: content,
})
);
};
redux slice:
setFilterType(state, action: PayloadAction<FilterType>) {
if (action.payload.type === typeOfFiltering.dishType) {
const chosenType = action.payload.content;
if (action.payload.set) {
state.chosenRecipeTypes.push(chosenType);
}
if (!action.payload.set) {
state.chosenRecipeTypes.filter(
(recipeType) => recipeType !== chosenType
);
}
}
if (action.payload.type === typeOfFiltering.dishLength) {
const chosenType = action.payload.content;
if (action.payload.set) {
state.chosenRecipeLengths.push(chosenType);
}
if (!action.payload.set) {
state.chosenRecipeLengths.filter(
(recipeType) => recipeType !== chosenType
);
}
}
},
If you need some functionality in few other components make some helpers functions and reuse it in separate component. If you use it just on one place then you don't need to separate...
also try to use switch instead of if with default case on bottom
and for me looks better if you use destructors instead of this
const chosenType = action.payload.content;