Rerendering page based on submission in React/Redux with Calling API - reactjs

Question

I am trying to call API with Redux, and it calls again based on a form submission.
which means if query is none, it returns all lists or it returns lists that match the query.
// List.tsx
import React, { useEffect, useState } from "react";
import { connect } from "react-redux";
import { getFeatures, increasePage } from "../../redux/featuresSlice";
import { FeatureItem } from "../../components/featureItem";
interface IFeatureProp {
featureObject: any;
getFeaturesWith: any;
}
const FeatureList = ({
featureObject,
getFeaturesWith,
}: // page,
IFeatureProp) => {
const [keywords, setKeywords] = useState("");
const fetchData = async () => {
getFeaturesWith(featureObject.page, keywords);
};
const handleSubmit = (e: any) => {
e.preventDefault();
fetchData();
};
useEffect(() => {
console.log(keywords);
fetchData();
}, []);
return (
<div className="max-w-screen-xl mx-auto mt-8">
<div className="px-12">
<div className="relative">
<div className="relative">
<form onSubmit={handleSubmit}>
<div className="absolute top-0 bottom-0 left-0 flex items-center px-5">
</div>
<input
type="text"
placeholder="Search..."
value={keywords}
onChange={e => setKeywords(e.target.value)}
/>
</form>
</div>
<ul>
{featureObject.features
.map((c: any) => {
return (
<FeatureItem
id={c.id}
name={c.name}
desc={c.desc}
/>
);
})}
</ul>
</div>
</div>
</div>
);
};
function mapStateToProps(state: any) {
return { featureObject: state.featuresReducer.explore };
}
function mapDispatchToProps(dispatch: any) {
return {
getFeaturesWith: (page: any, keyword: string) =>
dispatch(getFeatures(page, keyword)),
increasePageWith: () => dispatch(increasePage(1)),
};
}
export default connect(mapStateToProps, mapDispatchToProps)(FeatureList);
//featuresSlice.js
import { createSlice } from "#reduxjs/toolkit";
import api from "../api";
const featuresSlice = createSlice({
name: "features",
initialState: {
explore: {
page: 1,
features: [],
},
favs: [],
},
reducers: {
setExploreFeatures(state, action) {
const { explore } = state;
const { payload } = action;
payload.features.forEach(payloadFeature => {
const exists = explore.features.find(
savedFeature => savedFeature.id === payloadFeature.id
);
if (!exists) {
explore.features.push(payloadFeature);
}
});
state.explore.page = payload.page;
},
},
});
export const { setExploreFeatures, increasePage, setFavs, setFav } =
featuresSlice.actions;
export const getFeatures = (page, keyword) => async (dispatch, getState) => {
const {
usersReducer: { token },
} = getState();
try {
const {
data: { results },
} = await api.features(token, page, keyword);
dispatch(
setExploreFeatures({
features: results,
page: 1,
})
);
} catch (e) {
console.warn(e);
}
};
export default featuresSlice.reducer;
when I submit keyword, it works as I expected at backend.
[07/Feb/2022 01:55:23] "GET /api/v1/features/?search=abcd HTTP/1.1" 200 3615
And I see only lists that match the query in redux-debugger.
But it doesn't re-render the page, which means I only see whole lists.
Is there what I can do for updating state?

Answer 1

The issue is that your reducer is mutating the state, which should never be the case within the Redux ideology.
Instead, you should be creating a new state object (with your changes applied) and return it from the reducer. And if you don't want to modify the state - just return the original one kept intact. All your reducers should be like that.
reducers: {
setExploreFeatures(state, action) {
const { payload } = action;
const newFeatures = payload.features.filter(x => !state.explore.features.some(y => y.id === x.id));
return { ...state, explore: { ...state.explore, features: [...state.explore.features, ...newFeatures], page: payload.page } };
},
},
along these lines ^^