I tried everything as per tutorial and connect my next.js 13 with the provider with redux-toolkit but I'm getting weird state not the state I defined.
My code is exactly like the counter tutorial on react redux documentation.
I was expecting a state with a counter variable with a value of zero.
Related
I am struggling with using Web socket in ReactJS.
I have followed this solution: https://stackoverflow.com/a/60161181/12962511
This solution works pretty good!
However, I wonder why onmessage is in useEffect.
I tried onmessage in the useEffect with [] which is componentDidMount. This results reset my states but not starting the function from the beginning because useEffect with [] did not get triggered in this case.
So my question is:
The difference between put onmessage in useEffect with [] or in just useEffect.
The necessity of useRef in react Hooks websocket (I tried both ways and it looks pretty same on network console.) - I know useRef prevents making websocket every re-render.
I have stuck this issue for all day long. :(
Please help me.
Thank you so much!
useEffect without dependencies will be triggered every render. As you need to make subscription only once, it should be with empty decencies [].
In your example, useRef is used only to pause listening to messages via websocket. If you don't need this logic, you able to not use it.
I am still learning React and I apologize if this is a stupid question. I am currently planning about the architecture of my simple App.
I am using Next.js for this project
I have a component that calls the third party API for data every 5 seconds. The data is shared among all pages in the app.
If the component that is fetching the data is not on the main/home page. Are there anyways for homepage to get the data it needs from another page?
For example [Below are all pages]
index.js // Plain simple page that displays current weather and top music
http://localhost:3000/
weatherforecast.js //Using componentDidMount every 5 seconds to fetch Weather Data
http://localhost:3000/weatherforecast
musicplaylist.js //Using componentDidMount every 5 seconds to fetch Weather
http://localhost:3000/musicplaylist
The data shown in homepage has to be refreshed every 5 seconds if there are changes to the following data in weatherforecast.js and musicplaylist.js
I had this in mind but I have a feeling that it's not the right way to do it.
In the Homepage.js, include WeatherForecast and MusicPlaylist components to fetch the data. If this is the case, it seems like I am repeating the same principle in every page.
I found out about Redux which store states as a global object. But how does the state know when to update. But before we getting to state, I am still not sure if components on another page can fetch the data without the user accessing the page.
Thanks for reading this question.
For a pure React solution, you need to utilize other lifecycle methods available for React. componentDidMount is a good spot for making API requests, so you're in the right place to start. However, componentDidMount occurs only once, right after the componentWillMount and after the DOM is ready with a complete render of the component. Setting your API call to run at a set interval will not trigger a rerender of the component, no any of it's sub components. Instead, use componentWillRecieveProps to add your interval request logic. After each interval completes, run setState with the new data from the request to update the default state defined in your constructor. As a bonus step to improve performace, follow up with function that returns a bool in componentShouldUpdate. This way you can strictly define how and when and what is causing any and all component re-rendering.
Redux is an excellent solution to take care of what you want to do. Personally always use it in my React projects to manage state. Using Redux, you could make your API calls still occur in componentDidMount, however the call can hook into your Redux store and update your initial state. The frees you up from have to worry about the local state of your component and how to go about conditionally rendering everything else in your app. Plus Redux abstracts other functions you need, like re-running your fetchToAPI in certain intervals, into their own source (known as Action Creators). Action Creators hook directly in the Redux store so that when one is used, the resulting state diff is passed to Redux's Reducers, which in turn update the application global state. Then all that needs to be done is to have all of your components that need re-rendering on global state change to listen for state changes that occur in the Redux store and conditionally re-render based on the diff of the store from prevState => newProps. This can be setup fairly easy using the boolean check in componentShouldUpdate.
Hope this helps! Cheers.
Redux passes the data throughout the connected components via prop, given that a component is mounted whenever it receives new props a new render cycle is initiated so it will reflect your changes, moreover if you dont want to use Redux you can try using the new context api which is easy to implement and will also be suitable for your solution here is a tutorial on how to use it
To pass data between pages in next.js you will have to use Redux. The idea of Redux is to have a single source of truth. In redux you update the state by calling actions. To update redux state you have to create something called action creators which dispatches action to update the state.
Answer to your question as to if components on another page can fetch data without the user accessing the page is that they do not need to access the data. The components are mounted only when they are accessed, so it will fetch the data when they are mounted.
Regarding the state change notification, refer to below image, and hopefully it is worth one thousand of words:
Original article here.
I'm a bit confused about the Flux architecture, especially about the following statement:
Application state is maintained only in the stores, allowing the
different parts of the application to remain highly decoupled.
I have a component which must have a state. My question is, if I want to use Flux in my application, should this state live in the stores or inside the component? Notice that this state is not data from an API.
Also, if an user performs an action, should the component manage that action or an action creator?
A component gets its initial state from the store, but whenever the store emits a change, the state of the component is updated.
The tutorial on tylermcginnis.com broke it down quite well for me: http://tylermcginnis.com/reactjs-tutorial-pt-3-architecting-react-js-apps-with-flux/
Managing state with React only
I understand that if you're creating an application using React only, you will end up managing all of your state within different React components you create.
Managing state with React and Redux
If you decide to use Redux in combination with React, you can then move all of the state from each of your React components into the overall Redux application state. Each component that requires a slice of the Redux application state can then hook into the state via React-Redux's connect function.
Question
Does this mean that you no longer need to write any React components that deal with React's state (i.e. this.setState) since React-Redux is connecting the React components with Redux state by passing data into the container component as props?
There are different opinions on this, but the general view seems to be that redux should only contain "application state". Individual react components like dropdowns or modals will still have their own state.
There is still a lot of debate on this though, check out this issue for example about how to manage local component state: https://github.com/reactjs/redux/issues/159
Some projects have been popping up that are trying to solve this "problem":
redux-react-local
recompose withReducer (more for reducer semantics for local, not global state)
I have an issue with redux state being updated successfully, but react component not re-rendering, after some research I believe [forceUpdate()][1] can solve my issue, but I am unsure of correct way to implement it i.e. after redux state updates. I tried looking up examples on github, but had no luck.
As others have said, forceUpdate() is basically a hack. You get updates for free whenever the props and state change. React and Redux work seamlessly together, so avoid any such hacks.
If your Redux state is updating correctly and your React view isn't, then it's most likely that you're not updating in an immutable fashion. Check your reducers.
It is possible that your issues is that the state you are updating is not a top level property. react calls a "shallowEqual" method to tell whether the props have updated. This means all top level properties, but if you are changing a deeper property and all the top level ones are the same then you will not rerender.
I'm not sure if this would be the case with redux maybe it's doing something more sophisticated but I know that is the workflow in react. It's worth taking a look.
That's not the solution you want.
Without looking at your code, it's impossible to tell what's actually wrong, but forceUpdate is not the solution. React will re-render if new data is placed in the state or props. If you're not re-rendering, it means you're data isn't getting all the way through.
Redux already doing forceUpdate with connect decorator. Maybe you miss this point in your component. This behaviour is explained on the Usage with React section of official documentation.