Comments (75)
@jhabdas 100% agree. I'm really tired seeing so many new JS things these days. RxJS, NG2.0, ES7, JSPM, WebGL, fluxxxxxxxxZ etc, etc. Besides that, we have to be able to stay productive and GSD.
from react-starter-kit.
react's family!
react
& react-router-dom
& redux
& react-redux
& redux-thunk/redux-saga
from react-starter-kit.
But probably not this Apollo. Or this one.
from react-starter-kit.
It's gaining mindshare. Haven't used it myself yet. I'd personally love to explore something a little less clever than Redux. The amount of boilerplate one has to write with Redux, middleware you have to use (i.e. thunk, saga, whathaveyou) can quickly lead to a mind numbing amount of analysis paralysis. That said just pick something and go with it, learn from your mistakes and get better next time. There is and will never be a "correct" answer to this infinite thread.
from react-starter-kit.
This is closed but i still like reflux for its simplicity
from react-starter-kit.
@ChaosD It seems like Reflux misses some important characteristics of the Flux architecture: Can you dispatch actions in a predefined order with Reflux? Make sure that all the actions are dispatched synchronously (the next action dispatching does not start before finishing dispatching of a previous one)? Can a single action creator / method dispatch more than one action at a time (a couple of different actions)?
from react-starter-kit.
Be warned, I most certainly cannot answer your questions in a satisfying way because I'am just getting started with react.
I like the simplicity because it seems to streamline the whole process a bit more (maybe too much for you) and makes it easier for me to get started with. What i got so far is, that its possible to order your "dispatching", quoting the readme here:
waitFor is replaced in favor to handle serial and parallel data flows:
- Aggregate data stores (mentioned above) may listen to other stores in serial
- Joins for joining listeners in parallel
I could not find anything about action creators dispatching multiple actions but since actions dispatch themselves, i imagine you could simply call multiple actions to get what you need. I'am not quite sure if I got you right here but i cannot imagine a situation where this might be required. Could you elaborate?
These articles seem to address some of your concerns and helped me a lot understanding reflux:
- http://blog.krawaller.se/posts/react-js-architecture-flux-vs-reflux/ (basic info)
- http://spoike.ghost.io/deconstructing-reactjss-flux/ (probably your answers)
from react-starter-kit.
Have you reopened this issue for further discussion or are you already considering reflux? I'd love to hear your opinion about it because I'am also about to make this decision.
from react-starter-kit.
I just studied the flux docs again and it seems that you are right. if you want to stick to flux as close as possible, reflux might not be the best bet. Fluxxor is new to me, thanks for pointing me there. I will definitely check it out.
from react-starter-kit.
I played a bit with Fluxxor and it convinced me. It is really better if you do not want to be led astray from the Flux pattern.
What do you think about McFly?
Maybe it is time to rename the issue... ;)
from react-starter-kit.
Try https://github.com/deloreanjs/delorean which we build and it's too
simple.
7 Kas 2014 09:05 tarihinde "ChaosD" [email protected] yazdı:
I played a bit with Fluxxor and it convinced me. It is really better if
you do not want to be led astray from the Flux pattern.
Have you seen McFly? http://kenwheeler.github.io/mcfly/—
Reply to this email directly or view it on GitHub
#22 (comment)
.
from react-starter-kit.
@f , in what way Delorean is different to the previously mentioned? How does it handle the concerns @koistya mentioned with reflux?
Btw, I really love how so many Back To The Future themed libs pop up so fast! :D
from react-starter-kit.
A nice summary can be found here:
https://reactjsnews.com/the-state-of-flux/
from react-starter-kit.
I personally settled for Fluxxor. I think it's the perfect blend between vanilla flux and reduced boilerplate and you can further reduce it with custom mixins. If the project ever dies, it would be easy to migrate. It's a non negligible advantage if you're in react for the long term.
from react-starter-kit.
one more to consider...
https://github.com/arqex/fluxify
from react-starter-kit.
I don't see compelling reason why to use Dispatcher. I prefer Reflux, it's simpler and cleaner.
from react-starter-kit.
I'm personally using https://github.com/goatslacker/alt
from react-starter-kit.
FWIW, a bunch of the links to the npm packages (from the images) go to the wrong packages.
from react-starter-kit.
If the goal is for the application to be isomorphic, you should look into our Fluxible library. We're using store instances instead of singletons to avoid concurrency issues that you'd see on the server when doing isomorphic.
from react-starter-kit.
@mridgway, but that adds complexity... Have you tried the other way around - keep using singletons, but make sure that each server-side rendering operation (HTTP request) uses a separate JavaScript execution environment?
from react-starter-kit.
You have two options if you want to use a separate environment: use a separate node process for rendering each request or using node's vm
module. Neither of these options will give you very good scalability.
We haven't found that it adds that much complexity at all. In fact, it makes it easier to test stores because you don't have to worry about side effects between tests. You can see an implementation of Fluxible in our flux-examples or our docs site.
from react-starter-kit.
@mridgway what about rendering React app directly with V8 without Node's overhead?
from react-starter-kit.
I came to post about this exact thing and found this discussion.
alt gives you lots of flexibility in terms of isomorphism, you can keep your stores as singletons without using vm
or you can take the fluxible approach and create instances of flux and pass it around your react components using context.
The case for alt:
- Actually flux. It doesn't deviate from the flux architecture and uses flux's dispatcher.
- Isomorphic. Both creating instances or keeping stores as singletons.
- Terse, lessens the overhead (no constants, switch statements, no writing own dispatcher) but still has all the benefits of those (code grepability, able to listen to global dispatcher)
- Has some nice features (bootstrap / snapshots) which allow you to save the entire application state and then reload it later. This is great for debugging.
from react-starter-kit.
Well, there is also Flummox which aims to be idiomatic, modular, testable, isomorphic Flux & with no singletons required.
from react-starter-kit.
I came across this post and thought it was quite interesting, I have read the FLUX docs a while back and the possibilities are endless, however these flavours of flux just add a few tweaks to the Facebook flux minus a few of the core concept. (dispatching order, single point store optimisation, wait-for, and over all granular control)
Moreover the Facebook flux is more tested, more used and Facebook have demonstrated that it is very scalable.
The npm charts that are at the top of this page, is not drawn on the same scale, so comparing them visually will be misleading read the values carefully
from react-starter-kit.
@aaronGoshine I encourage you to check out a lot of the flux libraries if you're interested in flux. Most of them use the flux dispatcher so contrary to what you're saying they add value on top of flux. A lot of these libraries are also used in production on high traffic websites like fluxible and alt.
from react-starter-kit.
What a wonderful example of the paradox of choice!
No wonder that it's easier to get started with Meteor + React, than with Flux + React.
from react-starter-kit.
@goatslacker and others
I found a old post at https://news.ycombinator.com/item?id=8989495 saying
"Alt[1] has isomorphic support but there are some trade offs such as you're unable to use actions on the server."
Is this still the case? Are there other libraries which support actions on the server?
Since i have yet to make a single react app, i don't know how relevant this feature is.
from react-starter-kit.
@erkieh depends on what you're going for and what your setup is like:
You can go a singleton-free approach a'la Fluxible and pass around your instance down through props or context (or even better use something like AltContainer) this will allow you to call actions on the server and load your data into your stores. You'll probably need to keep track of your actions so you know when to render, alt's actions return so this is a matter of just returning a promise from each action (you can also use ES7's await syntax)
In some cases you already have all the data available, say you're using rails or something, in which case all you need to do is load it into the right stores and then render. In that case you can go with singletons, just load your stores up using bootstrap and then flush them after you've created your markup.
I'll be posting a how-to isormorphic guide sooner or later.
from react-starter-kit.
@dandv The irony is that, for a newb like myself, Meteor becomes another option to research. Thanks for mentioning it, though (sincerely).
from react-starter-kit.
@lleolin: the difference is that you can pick up the basics of Meteor in one hour and that will give you a lot more out of the box (a web+mobile reactive app built on a realtime platform) vs. what you'd learn from one Flux implementation (just a server).
from react-starter-kit.
@dandv Stop shilling for Meteor. It's cool tech, but this is a discussion of flux implementations.
from react-starter-kit.
I dont mind knowing Meteor is an option.
from react-starter-kit.
There are some other alternatives as well, take a look here (RxJS) and here (Minimongo).
from react-starter-kit.
Have a look at this one: https://github.com/optimizely/nuclear-js
from react-starter-kit.
Flummox is now deprecated in favour of Redux.
from react-starter-kit.
Evolution of Flux Great article
from react-starter-kit.
@koistya Can you please add these two to your list? (and thanks for the excellent compilation!)
https://github.com/optimizely/nuclear-js
https://github.com/gaearon/redux
from react-starter-kit.
Flummox is replaced by Redux.
from react-starter-kit.
How about redux ?
from react-starter-kit.
Just in case no one has mentioned it, redux?
from react-starter-kit.
@hipertracker how does redux "replace" flummox, exactly? Seems like they have two very different approaches.
from react-starter-kit.
@ericdfields "Flummox 4.0 will likely be the last major release. Use Redux instead."
from react-starter-kit.
@hipertracker oh, right there in the readme.
i'm an animal.
from react-starter-kit.
Redux seems to be the clear winner
from react-starter-kit.
Can someone please tell me what this is:
https://github.com/elierotenberg/react-nexus
and https://github.com/elierotenberg/nexus-flux
Does it have anything to do with flux? What can I use it for?
I am leaning towards using redux.
from react-starter-kit.
Can I get some pros and cons from someone who used redux for a large scale / complicated project?
from react-starter-kit.
Small and straight-to-the-point implementation: https://github.com/AlexGalays/fluxx
from react-starter-kit.
What a wonderful example of the paradox of choice!
No wonder that it's easier to get started with Meteor + React, than with Flux + React.
I think it's worth mentioning that _flux doesn't replace Meteor_. In fact Meteor doesn't have any built in architecture to keep yourself from getting buried in a game of 'whack a mole' when changing large codebases. I did write a spec for something based on flux to solve this (using Blaze) but that's off topic.
However i've used Meteor + flux + React to have a pretty nice workflow with @goatslacker 's Alt. This gives you Relay type benefits while still using flux. In this context, Alt's snapshots are handy because you can snap the state before a hot code reload and bootstrap on re-load. It also makes it easy to track mongo cursors and update the store on change. Alt seems to be one of the best choices so far with Meteor. I've used it in a large Meteor prod app and it's working great.
If interested I have a leaderboard repo with Meteor + Alt/Reflux + React:
https://github.com/AdamBrodzinski/meteor-flux-leaderboard
from react-starter-kit.
Looks like alt will directly replace MartyJS but the developer suggests Redux as superior:
http://martyjs.org/blog/2015/08/02/marty-last.html
from react-starter-kit.
Isomorphic Flux example
Stack: React Starter Kit, Alt, Iso, Firebase
Check out:
...then...
I understand Redux is the crème de la crème when it comes to Flux implementations (as of this hot minute), but I personally find the concept of immutables and reducers too much to grok for a starter kit. To quote James Long on Immutables:
[Y]ou never know if you are working with a JavaScript object or an Immutable one. This makes reasoning about functions harder.
from react-starter-kit.
Any ideas as to the best way to wrap whole application state with Provider as per Redux requirement?
I tried to inject Provider into src/app.js into the ReactDOM.render but I'm getting Unhandled promise rejection ReferenceError: React is not defined tho webpack is bundling without a hitch and not reporting any error.
I've circled the addition so everything is as per current version save for these imports and the constant that were also added for obvious reasons:
import { Provider } from 'react-redux';
import configureStore from './store/configureStore';
const store = configureStore();
from react-starter-kit.
ReferenceError: React is not defined
That's because any JSX expression (<Provider ...>...</Provider>
in your case) is transformed to React.createElement() under the hood.
I've circled the addition
That's what you get after JSX:
ReactDOM.render(
React.createElement(
/*string/ReactClass type*/ Provider,
/*[object props]*/ { store: store },
/*[children ...]*/ {
component: component,
appContainer: appContainer,
() => {
// ...
}
}
)
)
Is this what you expected to get?
Any ideas as to the best way to wrap whole application state with Provider as per Redux requirement?
https://github.com/erikras/react-redux-universal-hot-example/blob/master/src/client.js#L37
from react-starter-kit.
@sompylasar
Oh damn, I'm so thick, thank you for pointing the problem out and for the possible solution!
I guess in case of react-starter-kit direct, conversion to redux aint going to be as smooth as I was hoping it to be lol but erikras' example is the best yet so let's see if I can bend react-starter-kit to redux will...
On a side note I'm kinda surprised nobody has converted this kit to redux yet, considering it's part of WebStorm and it now being used in real, high-end development.
from react-starter-kit.
https://github.com/fluxury/fluxury
from react-starter-kit.
This is quite simple to use,
https://www.npmjs.com/package/fluxtore
https://github.com/ryanez/fluxtore
from react-starter-kit.
What flux? http://github.com/hellyeahllc/exim
from react-starter-kit.
😼
from react-starter-kit.
I personally use Alt, tried Redx and I didn't like switch statements, constants, too much boilerplate as for me.
from react-starter-kit.
@koistya could you please fix the typo by replacing depricated with deprecated ?
from react-starter-kit.
redux please :)
from react-starter-kit.
Switched to redux finally, it's easier when App grows I need to change and access data from different stores, it's easier when it's all single store.
from react-starter-kit.
Here we are using redux, the best of them all: github.com/Dindaleon/hapi-react-starter-kit
from react-starter-kit.
Does anyone have a fork of this kit with redux implemented?
from react-starter-kit.
@heks if not, you should be able to cobble one together using one or more of these: http://habd.as/awesome-react-boilerplates/
from react-starter-kit.
I'm going to close this one as it's not a real issue or feature request. But feel free to continue the conversation on this thread. You're also welcome to participate in discussions on Gitter, Appear.in, or StackOverflow.
from react-starter-kit.
Redux rocks :)
from react-starter-kit.
mobx? https://github.com/mobxjs/mobx
from react-starter-kit.
Preact FTW! Wait, no. Inferno. Wait... ::thump::
from react-starter-kit.
Simpler redux alternative - dynamo.Js
http://www.medsquared.com.au/blog/simpler-redux-alternative-dynamojs/
from react-starter-kit.
Thanks for sharing @valera-rozuvan. I worked with Redux and React for 6 months at the Enterprise level and constantly felt myself wasting time trying to create simple interfaces. ⭐️ added
from react-starter-kit.
Apollo and Redux or Relay modern or everything else in this order.
Why?
Because of future.
from react-starter-kit.
@langpavel Do you mean Apollo from this project https://github.com/apollographql/react-apollo ?
from react-starter-kit.
I use this one.
https://www.npmjs.com/package/fluxury
from react-starter-kit.
@valera-rozuvan Yeah, this one: https://www.apollographql.com/docs/react/
from react-starter-kit.
Related Issues (20)
- Need help building an old website from 2016 HOT 5
- Error 500: Unexpected token < in JSON at position 0 HOT 3
- SPAM
- 'Cannot find module' Error for cached modules in VSCode HOT 1
- Minor issue running 'Relay' with Yarn HOT 1
- Cannot find module ... TypeScript error in VSCode HOT 1
- Hot Reload not working properly HOT 1
- Hot Reload CSS and JS files changes HOT 1
- Cannot open started application due to Firebase error HOT 2
- site.manifest error - comma missing
- What kind of API token templates should I use? HOT 1
- Where's node_modules?
- Where's node_modules? HOT 1
- Error on first start. TT HOT 2
- Network: use --host to expose HOT 1
- Codespaces not working with "Use Template" (workaround: clone/fork/duplicate repo) HOT 5
- The engine "node" is incompatible with this module. Expected version "10". Got "18.14.0" HOT 5
- Shipping with Google_Cloud_Credentials Issue HOT 2
- Login Dialog is not showing up
- Unable to add packages using Yarn HOT 1
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 react-starter-kit.