I got stuck on routing some code with redux.
// featureSlice.js
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;
},
increasePage(state, action) {
state.explore.page += 1;
},
setFavs(state, action) {
state.favs = action.payload;
},
},
});
export const { setExploreFeatures, increasePage, setFavs } =
featuresSlice.actions;
export const getFeatures = () => async dispatch => {
try {
const {
data: { results },
// data
} = await api.features();
console.log(results);
dispatch(
setExploreFeatures({
rooms: results,
page: 1,
})
);
} catch (e) {
console.warn(e);
}
};
export default featuresSlice.reducer;
// index.js
import { connect } from "react-redux";
import { getFeatures, increasePage } from "../../redux/featuresSlice";
import ExploreContainer from "./ExploreContainer";
function mapDispatchToProps(dispatch) {
return {
getFeaturesWith: page => dispatch(getFeatures(page)),
increasePageWith: () => dispatch(increasePage()),
};
}
function mapStateToProps(state) {
return state.featuresReducer.explore;
}
export default connect(mapStateToProps, mapDispatchToProps)(ExploreContainer);
and
\ ExploreContainer.js
export const ExploreContainer = ({
getFeaturesWith,
features,
increasePageWith,
}) => {
useEffect(() => {
getFeaturesWith();
}, []);
return (
<div className="h-screen flex items-center justify-center bg-gray-800">
<div className="bg-white w-full max-w-lg pt-10 pb-7 rounded-lg text-center">
<h3 className="text-2xl text-gray-800">Log In</h3>
</div>
</div>
);
and i am trying to route this code with router below
// router.tsx
const ClientRoutes = [
<Route key={6} path="/happy" element={<ExploreContainer />
];
export const LoggedInRouter = () => {
return (
<div>
<BrowserRouter>
<Header />
<Routes>
{ClientRoutes}
{/* <Route>
<NotFound />
</Route> */}
</Routes>
</BrowserRouter>
</div>
);
};
But it comes out with an error saying ‘ Type ‘{}’ is missing the following properties from type ‘{ getFeaturesWith: any; features: any; increasePageWith: any; }’: getFeaturesWith, features, increasePageWith‘
Is there any way I can figure this out?
Plz help me thx…
