From my understanding Redux is a state container that helps you manage data flow within your application.
I read the following in the docs 'Redux can be used on the server for server side rendering'.
In the case where you are using Redux with React to manage the flow of data relied on by your UI where exactly does Redux fit within the front/back end spectrum?
I guess it is not too important, but it depends on whatever use you give it. However, apparently it is now called an isomorphic framework/library. Which means it runs both on the server side and the client side. Here's a starting list. Here is an example.
Related
Creating an application that uses redux state quite seriously.
While passing values between the UI components and the reducers. The immutability has become a problem.
1) The cycle problem - I have forms that create JSON objects - which are then used by reducers to maintain the model. The next time you use a form, it is set to the earlier state,.. and either gives error or updates the previous attribute along with itself. Is there someway to capture things in non redux state and then pass it to the states for process?
2) Redux returns or reducers become extremely unmanageable on scale. I have started using immer for this. Is this a good choice?
Are you using Reactjs for creating the forms?
To benefit most from immutabilitiy it is best if your design embraces it also.
What I mean: Develop a form which just displays your data. (a pure form, or FormPure)
Then wrap this form / component by another component which holds the state of the form to be displayed and actually displays the data through the pure form. And allows you to just edit it.
The hierarchy would look like: App > Form > FormPure
Components
Form:
Connected to Redux
May have its own state.
FormPure:
Does not know about redux
Only displays data provided from its parent (in react via props and communicated via callbacks up)
When the user hits the Save Button then the connected Component (Form) may dispatch an action to update the state in redux.
This way you may build your FormPure in isolation separately from any data, and just bring it to live as needed.
You may consider using Storybook for nicely designing your components.
For 2: Yes immer is reasonably fine to use, just make sure you are not overusing it by creating to large object trees, as described in the documentation.
Also make sure to turn off autofreezing when deploying it to production.
Hint: immer uses Proxy make sure your target platform supports them, or make sure to switch then to the ES5 implementation which is considerably slower (see, immer docs)
I love Redux, but to use it, I have LOTS of additional code scattered all over my application: connect, mapDispatchToProps, mapStateToProps etc etc
It appears to me however that I should be able to both dispatch to the store and get any value from the store via a global window level reference to the store object. If I did this, it would cut alot of code out of my application.
So the question is, what is wrong with this approach? Why NOT do all my Redux disptach and state access via window.store?
I wrote a long Reddit comment a while back about why you should use the React-Redux library instead of writing store code by hand.
Quoting the main part of that answer:
First, while you can manually write the code to subscribe to the Redux store in your React components, there's absolutely no reason to write that code yourself. The wrapper components generated by React-Redux's connect function already have that store subscription logic taken care of for you.
Second, connect does a lot of work to ensure that your actual components only re-render when they actually need to. That includes lots of memoization work, and comparisons against the props from the parent component and the values returned by your mapStateToProps function for that component. By not using connect, you're giving up all those performance improvements, and your components will be unnecessarily re-rendering all the time.
Third, by only connecting your top-level component, you are also causing the rest of your app to re-render unnecessarily. The best performance pattern is to connect lots of components in your app, with each connected component only extracting the pieces of data it actually needs via mapStateToProps. That way, if any other data changes, that component won't re-render.
Fourth, you're manually importing the store into your components, and directly coupling them together, thus making it harder to test the components. I personally try to keep my components "unaware" of Redux. They never reference props.dispatch, but rather call pre-bound action creators like this.props.someFunction(). The component doesn't "know" that it's a Redux action creator - that function could be a callback from a parent component, a bound-up Redux action creator, or a mock function in a test, thus making the component more reusable and testable.
And finally, the vast majority of apps built using React and Redux use the React-Redux library. It's the official way to bind the two together, and doing anything else will just confuse other developers looking at your project.
Also, per the Redux FAQ entry on importing the store directly:
While you can reference your store instance by importing it directly, this is not a recommended pattern in Redux. If you create a store instance and export it from a module, it will become a singleton. This means it will be harder to isolate a Redux app as a component of a larger app, if this is ever necessary, or to enable server rendering, because on the server you want to create separate store instances for every request.
Summarizing all that:
Better performance
Lower coupling via dependency injection of the store
Better testability
Better architecture
I'd also suggest you read through my two-part post The Tao of Redux, Part 1 - Implementation and Intent, and The Tao of Redux, Part 2 - Practice and Philosophy. These two posts discuss the history and intent behind Redux's design, how it's meant to be used, why common usage patterns exist, and other ways that people may use Redux.
I'm building a synthesizer which has a piano-style keyboard UI input.
The keyboard note on/off events can happen quite frequently, these are used to update different parts of the UI and to trigger audio.
What is the frequency threshold which Redux can handle events? For example, if an event occurs 60 times per second which needs to update some aspect of the UI, how would one handle that using Redux patterns ?
I'm fine with doing this event-ing outside of Redux store entirely if Redux doesn't handle this use case.
Redux doesn't have any magic built into it, it's just an immutable state handler, so whatever javascript can do, redux can do.
What you want to take care of are dom operations, and in your case I'm assuming sound operations.
so your optimizations would be more on the react side, not redux.
if you want help with that, share your relevant react code here.
In general, the place to start optimizing react is shouldComponentUpdate
EDIT:
Here are some links I've found that might give some guidance / inspiration:
https://github.com/xjamundx/react-piano
https://github.com/DanielDeychakiwsky/react-piano
I'm about to start a new project and I'd like to use Single Page Application technique. Since I'll be using ASP.NET I think the easiest way will be using Angular, which I'm new with.
Anyway, what scares me the most about Angular (or any other JS/TS tech), is since I don't have much time, I can't afford to rewrite all the models/entities to another language. The code and maintenance cost of this is too high for me.
tl;dr
So my question is, is there a way to have Angular use the original model/entity names so I can use them in the page without the need to rewrite any unnecessary code?
Will the .NET attributes take action?
I guess your concern is, that your business object world (entity model) needs to be reflected in your client/angular app as models (javascript objects) ?? The need for them comes also from typing errors you get in angular 2.
Creating and maintaining a transparent model world spanning server and client part is way too much effort for real world applications, although it would be nice.
I decided to use and receive the model as a result from a remote call via AJAX/WebAPI and work with these "models" in my client applications. The result then reflects your business model (entities) you have probably defined already.
this.dataService.getRecords('MT_MyEntity')
.subscribe((data: any[]) => {
var response: any = data; // Do this to avoid typing errors
var resprecords: any = response.items;
// Here you get entities;
// Deal with your business objects fetched from remote system; Use it to show in forms, ....
},
error => {
// your error handling
});
In your application you can use the entity and attributes names you have defined in your server side model (take care of upper/lower case modifications)
For me this is a pragmatic way to deal with that and it works very well.
For any decent size application the benefits of creating client side model far outweigh the effort required to create and maintain them.
This effect is more pronounce with TypeScript as it allows compile time checking of the contracts. As we move more and more code to client side and use frameworks like Angular, having a clearly defined model helps us understand what is happening. We derive the same benefits that we derive when type checking is available on server.
Having a separate client side model also allows us to adapt such model to client side UI needs (albeit sometime we create viewmodel to satisfy such requirements)
The approach of generating these client side contracts, as highlighted by #Ivan can help us to reduce the overall effort.
I'm trying to figure out a good way to create tutorials for using Meteor apps. Visually, I've figured out a good approach, and packed this into a smart package:
https://github.com/mizzao/meteor-tutorials.
However, there is a second piece that turns out to be rather hard to figure out.
In many cases, a tutorial app needs to be loaded with fake data, to demonstrate the interface to the user without requiring it to be populated with real data that may be hard to generate. (For example, see https://www.planapple.com/trip/demo/349/ which is a demo for PlanApple). In Meteor, since the content of an app is basically defined by the contents of some collections, I see two ways to do this:
Maintain two sets of collections, one for the tutorial and one for the actual app. Use the first set for the tutorial and the second when the user is actually using the app.
Use one set of collections, and fill it with fake data during the tutorial using a subscription and with real data when the user is actually using the app using a different subscription.
The first approach is clearly bad; it means that one cannot write the app without being agnostic to whether it's being used as a tutorial or not and there is a lot of messy if/else reactive logic in presenting the app that is unnecessary. Moreover, this will be very hard to maintain if the app has more than a few collections.
The second approach seems to be the more Meteor-esque way to do things. What we basically want is for a server publication to fill all the client collections with some fake data, and then allow the data to be manipulated in whatever way on the client side without the changes propagating to the server; the client basically gets a copy of the server's tutorial data and then makes only local changes to it which are then discarded. This boils down to two things:
Sending fake data down from the server to client via a custom subscription into the same named collections as the regular app. This is definitely possible as I've written in https://stackoverflow.com/a/18880927/586086
Ignoring any inserts, updates, and deletes from the client (on the server) after the initial load of data; but allowing them to happen locally. This is also possible if one creates null (unnamed) collections, as in http://docs.meteor.com/#meteor_collection.
The problem is that although it's possible to do each of the two steps above separately, I want to do both of them - I want the data to be loaded into the same named collections as the client would have with real data, to avoid the complicated control logic of having two sets of collections, but I also want changes to be local-only but not propagated back over the subscription during the tutorial.
Anyone have ideas about how to do this?
A related question about whether the second part is possible: How does a Meteor database mutator know if it's being called from a Meteor.method vs. normal code?
EDIT: It seems that what we'd basically want to do in the tutorial is inserting directly against the local Meteor Collection as in {https://stackoverflow.com/a/19523301/586086}. However, is there a way to generally turn on this behavior during the tutorial for all relevant mutators, instead of explicitly having to specify this?
I ended up implementing this myself with the partitioner package, which allows connected clients to be divided up into different slices each containing different data.
Basically, the idea is to put the user(s) into a new partition when they are in the tutorial, and then put them into another partition when they are using the app for real. Works great with the tutorials package as well. This gives up the ability of having changes to be client-local, but storing the tutorial data doesn't have much overhead and turned out to be useful in my case anyway.
An example of an app that does this is https://github.com/mizzao/CrowdMapper.