I have found a serious flaw I think in ReactJS. Although I admit this flaw perhaps might be a flaw in my understanding :) I am trying to build a simple Todo application (using TodoMVC), and when you try to use something like Redux for state managment, you run into very, very hairy issues when trying to process nested JSON, i.e. a database response that typically would include a parent node ("projects"> and then child nodes "todos") related to the parent.
Redux seems to want you to "normalize" the data from the response so it's immuatable. Not to upset anyone, but this seems like the most ridiculous thing in the universe. So, we build a SPA app to process json responses from our data....and then...oh wait, we have to build an ORM on the client to munge all that data into a different format to process it.
If this is the state (sorry no pun intended), of React, Redux and the like, Javascript frameworks should be abandoned. I built something in Rails in like 20 minutes. Of course it's not a SPA, but it was simple to create this MVC structure... not only does it seem extremely difficult, hairy and overly complicated in React, when Redux is added, it gets into the area of absurdity. Perhaps that is why we only see very very simple tutorials with all these tools.... building huge apps with them isn't possible.
So basically, in just trying to code a simple few lines of this example above with react and redux, I was lead to this:
https://redux.js.org/recipes/structuring-reducers/normalizing-state-shape
Can someone prove me wrong? PLEASE. Just a simple codepen showing me you can have a parent "project" component, which you can add "todos" to as children and the ability to make MULTIPLE parent components, with MULTIPLE children without going down the rabbit hole above.
This is a serious flaw in my opinion if this is true. A showstopper.
Your question and understanding are wrong in a few ways.
For context, I'm a Redux maintainer, and I wrote the Redux "Normalizing State Shape" docs page you linked to.
First, you don't need to use Redux if you're using React. In fact, we recommend that most beginners should focus on learning React first, and only try learning Redux once they're comfortable with React.
Second, Redux is independent of React, although they're commonly used together. You can use Redux by itself, or with any UI framework (React, Angular, Vue, Ember, jQuery, vanilla JS, etc).
Third, normalizing is a recommended pattern, but it's not required. Per the docs page you linked, normalizing data has several benefits, but it's fine to keep your data nested if that works better for your application.
Fourth, there's many large complex apps that are written with React and Redux, not just todo examples. See the Apps and Examples list in my Redux addons catalog.
Both the React docs and Redux docs have links to many CodePen / CodeSandbox examples that demonstrate how to use them - see the Main Concepts and Tutorial pages in the React docs, and the Examples page in the Redux docs.
Also, the TodoMVC.com site has several React todo list examples you can look at.
I'd suggest that you take the time to go through the tutorials in the React docs. You may be interested in my suggested resources for learning React and learning Redux, as well as the articles and resources listed in my React/Redux links list.
Related
One of our business problem statement is, we have to create component such that any consumer can use them as a widget and embed in their website. And the thing is we already have those component made with ember.
We're not aware that which stack the consumer website going to have, that could be random. So we thought of converting these ember components to web components.
We did small POC where we were not able to create web component out of ember component using glimmer. But we're facing couple of problems
We're not able to pass objects/arrays to web components with glimmer (we tried using pass it through properties)
Somehow shadow DOM is not working when web component gets rendered
For using simple glimmer component I have followed https://glimmerjs.com/guides/using-glimmer-as-web-components
Gist:
Idea
The idea was to create framework agnostic component, so that it can be used inside different applications flawlessly. The component was already written in emberjs.
Solution
Solution is to write web-component for obvious, but we've our code already written in emberjs add-on. So we decided to migrate add-on project to latest ember, after we migrated add-on components to glimmerjs and converted that glimmerjs component to web-component (using #glimmer/web-component) and use it across.
We took an effort, and made it working. I'm sharing the current solution that we've applied.
As we were facing couple of challenges as I mentioned in my question. I'll answer those points one by one.
For passing object between two component, we're passing it by raising CustomEvent from child-component to parent-component
didInsertElement() {
this.element.dispatchEvent(
new CustomEvent('data-ready', { bubbles: true, detail: this })
);
}
After a research found that, glimmer does not support shadow DOM, they don't have any plan for supporting it yet. And re-analysing the requirement once we thought shadow-dom is good to have feature. We're using CSS specificity (traditional way) to isolate CSS specific to component :p
Though after applying above things we're in good shape. If in case you wanted to have a look at the code. Please check this github repository (initial look)
I'm working with React-Redux and just wanted a bit of clarification as it is a mental blocker for me.
Using the Redux libraries allows us to have a different architecture to manage state - ok.
But using this comes with a variety of helper functions and in the process of looking at online material I have found there are a number of ways of writing your code.
In terms of state management, Facebook's react docs includes stuff like componentWillMount, componentDidMount, getState, etc. Then there's connect(), Redux thunks, etc.
Is it correct that these should still be used when writing Redux-React? Does it defeat the point in Redux? I'm a little confused at where the line is drawn between the two in terms of how to actually write code?
As always, thank you for the advice
Check this official Redux tutorial section: http://redux.js.org/docs/basics/UsageWithReact.html
That will help you to understand how to use them in pair. Even better, check whole tutorial.
I started learning React and It's really amazing, I enjoy coding with React.
In official doc said that React can be used for UI only.
React is a JavaScript library for creating user interfaces by Facebook
and Instagram. Many people choose to think of React as the V in MVC.
So, Can I use React with Angular.js for UI? Is that a good idea or bad? (why?)
Googling, I found lib called ngReact. It allows use React Components in Angular.
What you think about this? Give me an idea.
Thanks in advance.
I have been using ngReact for an application which is written on angular.
We had to switch the view for some parts of the applications to react because of the constant data changes and is expensive for digest cycles.
angularjs is good to handle the ui for most applications unless you are looking at rendering a lot of data. Even in that case if the data is not changing you can use single binding of angular. If you have data that is constantly changing your view might get slow in angular that is the only downside with existing angular versions.
That being said using ngReact can become tricky at times. Mainly communicating with angular services, basic directives like ui-sref and react nested components.
Be sure of the reason for using ngReact.
using react, angular and even a combination should be more than a personal preference.
Ive recently my self started to learn React. And you are completly right React is just for UI and dosent support any Model / Controlers.
But mixing React & Angular for me seems a bit odd? Angular got its own template engine with their directvies (Angular 1.xx). So it would be a bit akward to match these too frame works.
If i was you i would look into this thing called Redux, witch is another way of doing flux architecture. This is also the architecture that React is initially thought upon. And its really powerful.
Here is a couple of nice to have to get into:
https://egghead.io/series/getting-started-with-redux - This is a free course on Redux (witch you want to use with storing data for you react views)
You can actually interoperate Angular and React really nicely with https://github.com/bcherny/ngimport. My team and I have used it successfully on our 10k file hybrid Angular+React project - let me know if I can answer any questions!
Flux is a unidirectional data flow originated in the React team, it hold many benefits (Undo/Redo, Easy to test, one State to the app, and more) and it would be nice to combine it with AngularJs.
Victor Savkin wrote a blog post on how to implement it using AngularJs, but he broke a basic concept of Flux by changing the store instead of re-creating a new instance of it. Another thing that bothers me is that Angular is using ng-model and data binding, using Flux means that we should not use these anymore...
Thinking about all these issues, sounds like Angular and Flux paradigmas are colliding.
Anyone ever really creating a working Angular in Flux that works (As expected)?
With the Flux folk recommending Redux instead, whether the latter and Angular can work together is perhaps a better question. On that, they certainly can be and I recently wrote a blog post http://simonh1000.github.io/2015/10/angular2-one-way-data-binding/. I'm not sure how efficient it is as Redux complement React whereas it substitutes for some of Angular's model handling.
I'm very new to React, just experimenting with it. I'd like to know what are some common patterns, or libraries o built-ins for handling communication among components. For example, I have am input component and a "list" component that updates from the server according to what is in the input controller. Think of an autocomplete box. Since components have presentation logic, What if the two can't be "besides"? They're in different parts of the page and hence two different controllers.
Also, what if I have a login / logout button that works via Ajax? I imagine a lot of different components across the page reacting to the login / logout action reconfiguring themselves accord to a global "logged" state and the data retrieved from the server for the specific user that has logged in.
What is the best way that React "reacts" to those changes? Thanks
You should checkout Flux and Dispatcher.
It's kind of like a pub/sub system but without the problems of a pub/sub system. The advantage is that all events flow in one direction which makes the architecture much simpler and scalable.
If you haven't already, you should checkout Facebook's official React documentation. They have a really thorough tutorial that covers 90% of the scenarios you'll run into, including best practices for component interaction. They're also really good about building from no knowledge on up. Only takes about 20 minutes to go through: https://facebook.github.io/react/tutorial/tutorial.html
As mentioned in another answer, Redux is an amazing library for handling app state and keeping components separate that shouldn't know about each other. Basically, you can have parent and child components, but if you ever have a component with over 2 levels of children, you should consider using Redux (or Flux) to handle state between unrelated components. The problem redux solves is just breaking up those dependencies and still allowing components to have a single source of truth. Their official documentation is also really good: http://redux.js.org/