how to render updated state in react-redux? - reactjs

Question

I am trying to update state and render the updated value in my component but unable to achieve it.
<--Here is my action -->
export const fetchProducts = () => async (dispatch) => {
const res = await fakeApi.get("/products");
console.log(res.data);
dispatch({
type: FETCH_PRODUCTS,
payload: res.data,
});
};
<--Here is the reducer -->
const initialState = {
products: [],
};
export default (state = initialState, action) => {
const { type, payload } = action;
switch (type) {
case FETCH_PRODUCTS:
return { ...state, products: payload };
default:
return state;
}
};
<--Here is the component -->
const Products = ({ products, fetchProducts }) => {
const [productsList,setProductsList]=useState([])
useEffect(() => {
fetchProducts();
console.log(products);
setProductsList({productsList:products})
}, []);
return <ProductList products={productsList} />;
};
const mapStateToProps = (state) => ({
products: state.products,
});
export default connect(mapStateToProps, { fetchProducts })(Products);
<-- This is the first time I am using redux. I don't know where I am going wrong.All i am getting is undefined in the state. -->

Answer 1

you are using react hooks for a function-based component, using useSelector() hook instead of mapStateToProps might be easier in this specific scenario to get data from redux store, as i can't see what you've named your reducer in the root reducer, i'm assuming it's named productReducer, try this in your component:
import {useSelector} from 'react-redux'
...
let products = useSelector(state=>state.productReducer.Products)