I am in a project right now that uses useReducer + Context API for all state management. The app has grown to the point that state management is getting a little "messy". My question is how best to leverage reselect for performance and reusability in a react app that manages state this way. My assumption would be:
create and export selectors from a separate file
import the selectors into individual react components, and pass in state obtained from useContext,
use the values returned from the selectors in place of the state from context for the rest of the code in the component.
Is it that simple, or is there a better way to do it? Is it worth doing if the app is starting to get bogged down with rerenders??
ps. I can edit this question to include a code example of the steps above if that would be helpful.
Related
How to update data in multiple places without reloading the page in Vue.js?
This is my example.
When I add a new application, a new reminder is created. How to use this data in different places on the page?
Important: all elements are in different components.
Use Vuex or a global event bus depending on the complexity of your application.
If your application is starting to become more enriched with Vue components that need to communicate beyond simple child/parent and parent/child communications, then Vuex should be a good fit.
I am not going to go into depth about the technicalities because that information can be found in the documentation. Good luck.
All:
I am pretty new to React and Redux, what I am trying to build is a linechart (currently with D3.js).
The general UI structure of linechart is :
Main linechart area: several lines and X-Axis(date), Y-Axis(value),
Legend area: text label(with according color according to line)
I wonder could anyone give me ANY example with explaination how to implement this in React+Redux?
My currently confuse mainly is about two things:
How do I plan the container components and presentational components(from Redux tutorial, it seems that I need to build a lot of container components to wrap every presentational components which make things compilicated)
How to implement the initial start up of App(like what is the best way to do AJAX to get initial data and rendering, from Redux, it talks something like middleware, but I just can not get why and how to use that)
Thanks
My advice would be to keep it simple and add tools to your toolbox when you need the extra features and understand the implications.
I would advise you to only use React for now and try and see how far you can get without all the fancy React ecosystem features. It gets very frustrating if you don't have a clear understanding of how React works. Once you get familiar with React, you can look at Flux-like implementations like Redux and the problems they might solve for you.
If you choose this route, you can use your favorite ajax library (e.g. fetch) to get remote data into your components. You can do this fetching using the different component lifecycles that React provides (see https://facebook.github.io/react/docs/component-specs.html).
React's website states:
Lots of people use React as the V in MVC.
From this, I am inferring that React does not play the "M" and the "C" roles in MVC.
If this is correct, it means one cannot build an entire web application solely with React JS.
Then, how?
Does React require a complete MVC framework for the backend, such as Rails or Laravel?
Can React simply pull data from a backend where a framework, such as Rails or Laravel, would be setup as a web API?
Does React not need any of this and works in a totally different way (in other words: am I completely missing the point)?
MVC is just a term for structuring data flow in an application.
You do not need MVC to build an application, even if it might help.
What React does is that it specializes in building isolated components - where the data flows in a single direction(the von neumann model of computing).
This is very nice because you can build an application with the premise that everything is always rerendered when data is changed, thus avoiding hard to read "two way bindings".
The thing is that it's very inefficient to rerender every view when some minor data is altered, but Reacts "Shadow DOM" optimizes this process, and makes efficient rerenders.
But React does not care where it gets data from. You could build a backend with nodejs/php/ruby or whatever you want. How you communicate and send data between the frontend and the backend is also left up to you. You could use jquery/socketio/superagent or whatever you want.
You can also combine React with any other framework, or just skip frameworks all together and fetch the data directly from a react component.
Facebook, the creators of React, have their way or organising projects called flux, which plays well with react(even if it is not needed).
https://github.com/facebook/flux
I want to build a large application in Dart using material design. To accomplish this I included paper_elements into my project. My problem is, that I can't think of a good way to build my multi page application with paper_elements. Usually I create objects which would create their elements inline and add / remove themselves to the dom. The way I understand the paper_element tutorials I found so far this is not possible with them.
Is there a simple way to use paper_elements in dart while having an object based structure? For example I would have my application which loads either a register or login object and displays it in the browser. When logging in it should load a menu object which displays a menu and so on. All page changes should happen without a page reload.
I'm looking forward to all help, examples or links you could provide regarding my problem.
Cheers,
Tim
In Dart you normally build the app as SPA (single page application) without reload.
You can add remove a paper-element like normal DOM elements (div, input, ...) querySelector('#placeholder').append(new Element.tag('paper-input'));
You can also use <template if="{{}}"> or <template repeat="{{}}"> to make Polymer auto-insert these elements when certain conditions are fulfilled or for each value in a collection.
Your question isn't very specific but I guess all you need is already available here on SO as Q/A. Just search for [dart-polymer]. If you don't find anything just ask and we point you in the right direction.
a few that might be relevant
Dart Language: Polymer - Working with views
How to update polymer element bindings after it was removed from DOM and inserted again
How to add attributes to a dynamically created component
how to implement a main function in polymer apps (you don't need a main() when you use a polymer-element that acts as a container for your entire application)
Is imperative Mustache-Binding in Polymer.dart supported?
We have to implement multiple-document-interface web application. Each document has to live in a separate tab (but on the same page, it has to be SPA). There may be up to 50 opened tabs simultaneously and application should give ability to group tab panes by modules.
One of our options were to use AngularJS for this task. We like the way Angular handles partial views, structures application by using modules/controllers and performs dependency injection.
After digging in for couple of days, we've figured out that there may be some problems with the way bindings work: there is no easy way to prevent angular from watching tabs, which contents are not currently displayed to the user. You can imagine situation when user will have around 20 opened tabs and this whole thing becomes slow as hell! Also our application is very grid-heavy, so for grids I think we should avoid ng bindings at all.
We were thinking about ng-view and the way it recreates DOM on each activation ... this looks overkill and will force us to put all UI state into the view-models, even for scroll-bars :)
Can you suggest some possible ways to improve performance with Angular and MDI? Maybe we should even consider using some other ui-framework/set of tools to achieve same results?
What's important:
modularity (AMD)
dependency injection
declarative bindings (we do like how angular and knockout solved those problems)
MVVM/MVC
ability to create multiple instances of the same controller (open multiple "details" tabs for each specific item from the grid, for example)
modularity - Angular has it's own modularity rules/patterns which are good if you want to conform to them, but if you want to make something modular in a different way, eg... allow forms to be self contained so that multiple instances of them can dynamically be opened concurrently it's quite difficult
dependency injection - Angular allows you to write code that you can inject other into, but you cannot inject Angular, it seems an oversight that you cannot test your code isolated from Angulars?
declarative bindings - yep, the way Angular binds literals within HTML with the JS code makes it really hard to create MDIs with multiple concurrent instances of a single form. You really need to dynamically create your form instances with their own identifiers (in addition to Angulars) then scope your own identifiers within the bounds of a shared set of JS files (which is what you want), however then Angular's binding will get in the way of each instance if you continue to use Angular's bindings - alternatively you can try modify the HTML dynamically get Angular to refresh it's bindings.
Basically anything to do with MDI is harder than it needs to be with Angular and it's worth looking at alternatives for such projects before hand.
AngularJS can indeed be heavy on a big application, but only when you make a change inside the $scope. The bigger part of this time is spent looking for modification by dirty checking.
If you keep an AngularJS application inside a non active tab, a dirty checking can only happen after a outside event (like a WebSocket message). You can optimize your application to remove those listener when the tab is not focused.
If you follow the best practice of AngularJS, performance issues with a lot of pages opened should not be a problem. The bigger performance problem of AngularJS come with very big amount of data inside its $scope, but there is a lot of solutions proposed all over the internet.