Comments (10)
Good question. There are three ways to set a store's data in alt, and just two according to flux.
For flux
- In the constructor itself
- Through actions
For Alt you can use the methods above as well as
- Using
bootstrap
In your particular example since you already know the value of foo
you can just set it in the constructor. However, the constructor approach isn't terribly useful since, most likely, your data lives in some storage that is asynchronous. So that leaves us with just actions and bootstrapping. In flux, since the data flow is unidirectional, all updates to the store should solely come from the actions.
A common pattern is to kick off a few actions at startup time to seed the stores with data, you can see an example of that in flux-chat. Since this is a pretty common pattern alt has this special method called bootstrap which seeds all your stores with some initial data. I don't have any examples showing off asynchronous data loading just yet, but they're coming soon.
To answer your question though, you can do something like:
alt.bootstrap(JSON.stringify({
ProjectStore: {
foo: "Bar"
}
})
and an async example:
getFooValueFromServer().then(function (fooValue) {
alt.bootstrap(JSON.stringify({
ProjectStore: {
foo: fooValue
}
})
})
Disclaimer: bootstrap
only works once, it's meant to be used on initialization and then never again.
from alt.
Thanks for the reply! I ended up going with a global initialDataLoad Action that all the stores listened for. Works perfectly!
from alt.
I'm also trying to wrap my head around this.
Since everything is a singleton in flux what, is there a way to pre-render the app on the server (let's say with something like react-router) and some async data (some api call) ?
The only solution I found so far is yahoos fluxible but I really like the ES6 syntax of alt.
Is it possible to do a real isomorphic with alt?
from alt.
@steffenmllr check out this example https://github.com/goatslacker/iso/tree/master/examples/react-router-flux
It uses react-router and alt.
The idea is that you fetch all your data on the server, once all the data is gathered you bootstrap it, and then you bootstrap back on the client.
I'm still experimenting with the API as you can see in this commit so if you plan on using this example verbatim then make sure to use version 0.7.0
npm install [email protected] --save
Let me know at a high level how you're planing on fetching the data and using this, I'm gathering as much data as possible before I solidify the API for a 1.0.0
release.
from alt.
Thanks for the example. As I'm new to the flux concept, let me play with it and see how and if it works.
Wouldn't it be better to create a new alt
instance on each request and than bootstrap it?
On a higher level, i would like to define the routes once (I can figure that out) and maybe also share the api calls (I can figure that out too).
The only thing I would like to see is easy server side based rendering :)
from alt.
Creating an instance is the solution that fluxible came up with. The tradeoff with that is that you'll be giving up CommonJS require in favor of dependency injection since you'll need to inject the instance into all your React components and pass down the instance through the children, this can get quite messy.
The other problem with the instance approach is that then you'll start to use actions on the server. While this isn't a big deal in itself and can be manageable the logic can get hairy.
Actions are meant to be fire and forget, it's easy to track when one action finishes because you can listen to its corresponding store. However, you're limited to calling one action on the server because otherwise you can't keep track of when all actions have finished dispatching unless you do manual book-keeping.
The current tradeoff with alt is that you do all the data fetching yourself and then bootstrap the store. Pretty soon, I'll be creating an example where some of the data fetching is isomorphic as well.
If you can, share some of the api calls you're planning on making isomorphic so I can get a better idea of how you're trying to architect and we can massage alt's API.
from alt.
Thanks for the insights. I think the problem is, that flux isn't really designed to work on the server and client. Using actions on the server is not really an option since you would have to register all the events and callbacks somewhere and keep track of them (as you said).
If I only use one alt singleton instance you state in the docs that I can only use bootstrap once. In the example you use it on per request basis. Can you tell me whats the difference between boostrapping on the server and on the client ?
The app my building is pretty "dumm". There is only client side CRUD Logic and the whole thing only talks to a REST API.
from alt.
"Dumb" apps are interesting to me because that's what is most often being built so easing the pain of the 80% use case is something that concerns me.
Per alt 0.7.0, bootstrap on the server allows you to bootstrap the state and then immediately rolls-back to its initial state. Since this is a synchronous operation you're allowed to render your views with the proper state before the store's state resets on the next cycle. It's not perfect but its a trade off. On the client side you're only allowed to bootstrap once.
I'm thinking of changing this to allow you to bootstrap always on the client and adding back a special bootstrapFromServer
(name pending) method that does the magic.
from alt.
I do not understand where the bootstrap should be. In my app I have one critical store I would like to initialize early. Do I invoke an action and put the bootstrap into that? If so then where should that action be invoked from?
And if you will please do not assume isomorphic server side React rendering as that only increases complexity.
from alt.
@sjatkins You can put bootstrap anywhere in your code after you have initialized alt. (you do not need to invoke an action, you can just call it on the initial load of your app. So once you have an instance of alt:
// bootstrap expects stringified json
alt.bootstrap(JSON.stringify(jsonData));
where jsonData
is JSON in the structure:
{
StoreName: {
key: value,
key2: value2
},
StoreName2: {
key: value,
key2: value2
},
}
you might get this data from a call to your server like in the async example above or from localStorage. bootstrap docs
from alt.
Related Issues (20)
- Is this still alive? HOT 2
- sequentially perform actions that require source retrieval at same time HOT 2
- Error handler does not get triggered for ajax calls HOT 4
- Wait for store function to complete
- Different tests competing in modifying the store
- Multiple input in controlled forms
- Public Method returns state not store; am I guaranteed the Store is updated when the listener fires? HOT 1
- PropTypes in React 16 Deprecated HOT 2
- dispatchIdentity rudely omit all params when the first one is undefined.
- Upgrade to Webpack 3 HOT 1
- Store not listening to actions HOT 4
- can not call DataSource function during an action
- Typescript does not work
- Using bindListeners vs Store.listen emits changes several seconds slower HOT 1
- docs specify file that does not exists
- How to test async actions
- ss state in compoennts HOT 2
- Trato de hacer la mostrar mis registros en paginas HOT 1
- Documentation needs to be fixed HOT 4
- Documentation needs to be fixed
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from alt.