react-redux-test | understanding redux stores and react local state management
kandi X-RAY | react-redux-test Summary
kandi X-RAY | react-redux-test Summary
This project was bootstrapped with Create React App.
Support
Quality
Security
License
Reuse
Top functions reviewed by kandi - BETA
- Registers a new SWF service .
- Registers a service worker
- Checks if the service worker is valid
- Unregister the service
react-redux-test Key Features
react-redux-test Examples and Code Snippets
Community Discussions
Trending Discussions on react-redux-test
QUESTION
I am new to web development and is trying to learn react and redux.
I am following this tutorial https://www.youtube.com/playlist?list=PLC3y8-rFHvwheJHvseC3I0HuYI2f46oAK
As I'm trying to extend what I learned,
I'm trying to list all the users (clickable), once clicked will display (expand/collapse) all the post of the selected user (clickable again), once post is clicked, will display (expand/collapse) all the comment on that selected post
APIs to use:
posts: https://jsonplaceholder.typicode.com/posts?userId={user.id}
comments: https://jsonplaceholder.typicode.com/comments?postId={post.id}
Right now, I was able to list all the users and able to do the expand/collapse, and also able to display the post of the user however, I am experiencing below problem:
If I click on user[0] it will expand and display the post of user[0] (OK).
then if I click user[1], will expand and display the post of user[1] (OK)
however upon click of user[1] it also changes the post listed on user[0] to list the post of user[1] as well (NOT OK)
here is my UserContainer.js
ANSWER
Answered 2020-Mar-18 at 04:43You are storing the posts of that particular selected user at an instance, so change the state posts
of postsReducer
to object to store the posts of multiple users
Please find the code sandbox here
EDIT
If you want to prevent the loading indicator for other users then, you need to store the array of ids that are currently being loaded, and remove id once the data is loaded, for that you need to update the way you are dealing with loading state of reducer from boolean to array
Please find the updated sandbox here
QUESTION
I have new to web development and is trying to learn react and redux.
I am following this tutorial https://www.youtube.com/playlist?list=PLC3y8-rFHvwheJHvseC3I0HuYI2f46oAK
As I'm trying to extend what I learned, I'm trying to list all the users (clickable), once clicked will display (expand/collapse) all the post of the user (clickable again), once post is clicked, will display (expand/collapse) all the comment on that post
APIs to use:
users: https://jsonplaceholder.typicode.com/users
posts: https://jsonplaceholder.typicode.com/posts?userId={user.id}
comments: https://jsonplaceholder.typicode.com/comments?postId={post.id}
I have added a property collapse
, on the users array upon fetch for expand/collapse monitoring
My problems are:
- On my UsersContainer component upon click on the user, the collapse property changes (see on console), however the SampleContainer component didn't hide/show
- On the tutorial, he said that to change the state we should/must use the action/reducer (forgot the timestamp). Since this is additional property on the array is it ok if I update state on the handleClick function? If no, please give me idea on how to implement this kind of action/reducer.
below is my UserContainer.js
ANSWER
Answered 2020-Mar-15 at 18:36You are directly updating the userData
props which are immutable i.e is they cannot change and don't update the UI. You will need to update your redux store by dispatching a new action, in this case, it would be UPDATE_USER_STATUS
.
Here's a codesandbox with a working example.
Community Discussions, Code Snippets contain sources that include Stack Exchange Network
Vulnerabilities
No vulnerabilities reported
Install react-redux-test
Support
Reuse Trending Solutions
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items
Find more librariesStay Updated
Subscribe to our newsletter for trending solutions and developer bootcamps
Share this Page