score:1
Accepted answer
firstly you are using usedispatch wrong.
it must be used like this:
const dispatch = usedispatch();
and then you can use it like this:
const loadproducts = usecallback(() => {
dispatch(getallproducts());
}, [dispatch]);
useeffect(() => {
loadproducts();
}, [loadproducts]);
secondly, you need to extract products from useselector like this:
const products = useselector(state => state.data.products)
then you need to dispath fetchsuccess here
export const getallproducts = () => {
console.log("here is get all products");
return dispatch => {
dispatch(isloadingfetch());
api
.get("/products")
.then(response => {
console.log("response data", response.data);
dispatch(fetchsucess(response.data));
})
.catch(err => {
dispatch(fetchfailed(err.message));
});
};
};
so all component code can be like this to show your products: (note that i simplifed the render to show only product name)
import react from "react";
import { usedispatch, useselector } from "react-redux";
import { useeffect, usecallback } from "react";
import { getallproducts } from "../store/actions/fetch/index";
export default function cards() {
const dispatch = usedispatch();
const loadproducts = usecallback(() => {
dispatch(getallproducts());
}, [dispatch]);
useeffect(() => {
loadproducts();
}, [loadproducts]);
const products = useselector(state => state.data.products); // or state.data.filteredproducts
console.log("products:", products);
if (products && products.length > 0) {
return (
<div>
{products.map(product => (
<li key={product.id}>{product.name}</li>
))}
</div>
);
} else {
return <div>no products</div>;
}
}
Source: stackoverflow.com
Related Query
- reactjs using redux and thunks dispatch doesn't work
- How do we persist redux store without using localstorage and make full reactjs web application work offline
- using Material-ui checkboxes with the reactjs and redux
- Redux action return type when using dispatch and getState
- How to add action to functional component using Redux and ReactJS
- Routing doesn't work on packaged Electron app using ReactJS and reach-router
- dispatch is not defined on my functions using react and redux
- How to handle navigation using reactjs and redux
- How to delete each row using Reactjs and Redux
- Redux does not work now that I am using hooks and functional component?
- Add css to 1 page using scss and ReactJS and redux
- Get API Json data in object and array format using redux and reactjs
- Dispatch multiple actions using Redux Thunk and the await/async syntax to track loading
- Get JSON Data in multiple components using reactjs and redux
- react redux lead to infinite loop while using useeffect and dispatch
- How to get Django and ReactJS to work together?
- typesafe select onChange event using reactjs and typescript
- Import JavaScript file and call functions using webpack, ES6, ReactJS
- Advantages and Disadvantages of using ReactJS
- Using compose() and connect() together in React JS redux
- How to fire periodic actions using setTimeout and dispatcher in redux
- mock useDispatch in jest and test the params with using that dispatch action in functional component
- How to display 404 when URL doesn't match any route and when the URL contains /#/ using ReactJS
- Why are my props `undefined` when using redux and react.js?
- How to do POST in FORM Submit using reactjs and pass the object value into REST service?
- No need for state in React components if using Redux and React-Redux?
- How to read and upload a file in reactjs using custom button
- moving from twig to ReactJS: how to extend a template/component to build full reactJS pages? implement react-router and redux into symfony?
- How to connect simple Formik form with Redux store and dispatch an action?
- How to handle focus using declarative/functional style libraries like Redux and ReactJS?
More Query from same tag
- Docuaurus having both side bar and burger menu on screen at once
- How to trigger React TransitionGroup and Transition to animate onLoad
- How can I trigger a GraphQL error to test an ErrorLink on Apollo Client?
- How to stop propagation on Link elements from React-Router-Dom?
- Visual Studio Code extensions stopped working suddenly
- How to render a react component from a string name
- React-native node.js showing Error: Multipart: Boundary not found while uploading image using react-native-image-picker
- Create an input that allows only numbers, decimals and commas
- How do I change the number of cards displayed in row
- Best approach for managing strings in react native
- In React Native, how do you make an interactive tap-and-hold modal like Instagram?
- How to test componentDidMount conditionally making API calls
- destructuring assignment default value
- next.js getInitialProps doesn't work at mobile browser
- How to convert Vue classess to React classess?
- need to know when all async operation completed
- React DND - Cannot add new item to state after a drag and drop event
- How to render a select box based on the values of another in ReactJS?
- How to develop a pie chart from MongoDB in REACT
- Redux compare each index of array
- Unhandled Rejection (TypeError): Cannot read properties of undefined (reading 'value') when working with useRef in React
- How can I use the context in the constructor in my React Form?
- Attribute "aria-current='page'" with class='active' not disappearing from first NavLink even after clicking the other links
- React useEffect depedencies warning eslint
- handling promise for react render
- How to store all array values into a single React state?
- Is there a way to set the state of an xstate machine in a react component in useEffect?
- electron-forge with two windows : how to render the second window? electron-react app
- how do i grab push ID from database firebase
- How to make second GraphQL mutation after first one is completed in loop