Will fluxible app.rehydrate be called on every router change?
When is app.rehydrate getting called in the whole fluxible application lifecycle?
Rehydrate is called only first time when application is started on a client side (browser) to restore data that was used to render on a server. That is it's purpose, there is nothing to rehydrate when you navigating the app.
Related
I'm trying to wrap my head around this problem I'm having. Let me break it down for you.
I have a Nuxt project, which utilizes a modular store.
I have a global middleware that only runs server side (meaning when the page is refreshed).
This middleware is used to check if there's a cookie with user data, if so I'm making a post request to Firebase to evaluate the refresh token and fetch the user meta information (such as display name, etc). (I also tried using NuxtServerInit, I get the exact same problem)
All of this works perfectly. It runs just fine and by logging everything I know it is working and the state is changed.
In a loginUser() method, it sets the state of the application. (A token and display name value). When I login through the web app itself the cookie gets set properly and the state as well. The token is stored there and the display name as well.
However if I refresh my page it goes through the middleware and sets the state, but then on render it seems to be discarding all these changes I made to the store on server side and resets the store ready to be used on the client side.
Am I missing a nuxt configuration here? Do I have to setup a specific key to tell nuxt to preserve the server side rendered store?
Does anybody have any experience with this happening? If so please point me in the right direction.
If, like me, you are doing something with the component in which your props for the state are programmatic whilst on the server, but get set as a component element on the client, then you should check whether they are set as props or as attributes on the client side. I think that, as it is rendered on the server, the attributes can be interpreted as props, but as they settle in the frontend, they become unreadable, and so the state disappears. This leads to the effect of seeing the page look correctly rendered for a split-second, only to then rerender without the correct state.
So recently I started to implement a database in a react app (like any real world app would have). My question is Why is redux needed? I mean if you have a database you can push information directly in a database and retreive it from there. You don't need to save it in a state. (New to react,redux. This was just my point of view)
Database and state management tools such as Redux have different concerns (although they manipulate the same thing: data).
When a client uses your app, it will first retrieve data from the database. At that point, that data needs to be held in memory in order to display it.
You can decide to use the React Component internal state which is component-scoped. Now, this is perfectly fine if you plan on using the data you just retrieved inside the same component.
As your app gets more complex, you'll sometimes need to use the data in different points throughout your app (e.g. if you retrieve the user info, you'll probably need to display it in the header, in the profile page, etc).
This can be tricky to do using the React Component internal state as (if you've tried React a bit) you know passing data is done by passing props down children components.
The common solution when you need to share data between different components is to lift the state up in your app, so you can pass it down to the different components that need it.
This can be tedious and prone to errors as your app grows.
Redux is the solution that addresses that concern. It helps keeping the state you share throughout your app clear and clean by creating a global state that can be accessible anywhere in your application (among other things).
Redux is a state management tool. Redux is for client state, by default it's in-memory only. It is not a 1:1 mapping to your database data but for your views to dispatch actions and then update the store state so other views can react to those data changes. With Redux, the state of your application is kept in a store and each component can access any state that it needs from this store.
talking to database every time is a php kind of thinking, which puts lots of load on the server with huge number of requests... slowing down everything.
with redux you create a mini store cart & fetch necessary data from database for immediate use and keep all of them with the user and remove the requests to the server for those items.
you need to use database not every time but only when needed... to render the app faster and use less resources.
There are multiple reasons to use Redux while using a database. For example you wouldn't save volatile state in a database. You could see everything that should not be shared between tabs as volatile state, like routing or component states like opened menu or form inputs.
I'm looking for a way to move a react component with it's state across windows/tabs to provide an interactive split screen display to our interface.
Currently I have a shared web worker setup where the 2 windows are communicating to each other and passing data between when a component is to be be moved.
What I'm struggling with is passing the react component across and having the new window render it out. I've been thinking about a few possibilities, the first using renderToString() on that component and passing this across via the web worker to the new window however I'm not sure on the correct implementation for loading that component back in as it's done on the client directly. Have also looked at using a redux store and keeping this context in the web worker so the state is remapped.
Ideally I'm wanting a kind of data representation of the component in it's current state which I can encode/decode.
Any idea is greatly appreciated!
You may see React components as a representation of a state.
So what you have to share between your windows/tabs is a state.
The react components will synchronize if your react application handle the state changes.
If you have a backend in your stack, you may synchronize the state with the backend in all windows/tabs.
If you want "realtime" clientside synchronisation, you may go with your shared web worker solution, and just share a serializable state.
If you use redux, you could maybe use redux-persist with a custom "web worker" storage implementation.
So I've been getting in to Flux the last couple of days, and more specifically I have chosen the alt flux implementation to work around. Mostly because of they way it handles server side rendering, which I thought was very nice. I am also using React Router (1.0.0-beta3 for now)
I have a problem with where to initialize my stores with data. My application uses server side rendering, thus I can fetch initial data from the API when a request comes to my server, and depending on the path that the user has entered I can fetch different data. (Is this correct? Seems kinda odd to me, since the purpose of SSR is avoiding the "blank white screen" but now we have to wait for async callbacks before sending back the server rendered DOM?)
But what if my user clicks on the Navbar for example, changing the path in react router? How do I initialize a store with new appropriate data now? If i understand everything correctly, this will not trigger another request from the server. It will simply rerender on the client using the bundled javascript. What do I do in this situation?
Say for example that I have a ProjectsStore that on /projects contains all projects that a company has ever done, but on /company/projects it only contains the projects for that specific company. How would I go about changing the data in this store?
Trying to build a web client application with backbone aura. Struggling to add router to the application. did anyone try adding router to backbone aura yet?
I don't know about Backbone router, but I built a simple router that listens to every message each component send and update the URL, and listens for every change in URL and sends specific messages. As an extension I couldn't make it work (because it would render before the components that needed to listen for its messages -- at least the first based on the initial URL), so I built it as a component.