I'm writing a React component that I intend to make public, and I'd like to have it play nice either with JS arrays/objects, or immutable.js equivalents (Map/List).
What's the best way to identify an Immutable.js Map or List? I don't want to simply use Array.isArray, because I do want to enforce that it is either an Array or a List, for example.
I could just check for some of the Immutable.js properties, like _origin or __ownerID, but I don't want to depend on internal APIs that are subject to change in minor versions.
I would very much recommend the suggestions given by #robg and #joseph-the-dreamer. However, just for the sake of answering your exact need, for every Immutable.Type there is a Immutable.Type.isType() static function which you can use to determine if a given object is of that type.
E.g. Map docs -
var im = require("immutable");
if (im.Map.isMap(someObjectWhichMayBeMap)){
...
}
Related
in reading Mobx's documentation for its recommended best practices for defining data stores (see https://mobx.js.org/defining-data-stores.html), I see that the domain objects are stored in an array (in the example code "Example domain store, the TODOStore class contains a field "todos" which is an array). In that same class, functions like updateTodoFromServer and removeTodo do a linear scan matching by id by calling .find() or indexOf(). (The removeTodo function also has to call splice too!)
Normally, in a not-mobx context, based on this usage I would say that the todos field should actually be a map that allows you to look it up or delete it by "id" in constant time (or at least logarithmic time) rather than linear time.
BTW, in my own code, the number of items in the mobx store could theoretically be very large (if all possible items were pulled in)
Is there a reason the mobx documentation examples use an array here?
What if I used a map/ObservableMap instead? Is that better? Neutral? Not recommended?
If maps are indeed better... does a normal map or an ObservableMap make more sense here?
Thanks in advance for helping me understand mobx better.
I tried reading mobx documentation and asking the question in a search engine and reading multiple search results, but I didn't find an explanation to my question yet.
I am using the react-redux for one of my app, The design is quite difficult and performance required is very high. its actually wyswyg builder.
We have been using the react from last 2 months, Then we moved to the react-redux for the separation of code and improve maitainance, code readability and the parent-child approach headache ofc.
So, I have an array which has quite complex structure
This is how my state look a like:
const initialState = {
builder:{},
CurrentElementName:"",
CurrentSlideName:"",
.......
}
As redux recommend to have less data in particular object as possible, I have another 8-9 reducer which are divided from the main state.
My problem: builder object is very complex which has almost 3-4 levels down, objects and arrays, this all are managed runtime.
So, on the componentdidmount my application will call the server get the data and fill the builder:{}
builder:{
slidedata:[{index:0,controName:'button',....},{index:0,controName:'slide',....}],
currentSlideName:'slide1',
currentElementName:'button1'
}
This builder object is quite complex and depends on the user actions like drag and drop, changing the property, changing events, changing position this builder object is being changed by the reducer
let clonedState= JSON.parse(JSON.stringify(state));
//doing other operations
Every time some thing changes this object needs to perform certain complex operations, for ex, adding the new slide will do certain operations and add the slide to the current array called slidedata.
What is the best practice to fast this things up? am I doing something wrong?
I am not sure what is the wrong in this code, and as redux recommend I can not use the flat structure for this particular array as its managed run-time.
I am sure that component has the data which the component wants.
Is there any way to handle the big data? This iterations and changing the state is killing my performance.
Based on my current experience with React-Redux framework, Re-select and ImmutableJS make a perfect combination for your requirement.
Re-Select uses memoization technique on Javascript objects and have list of API's specifically dealing with these kind of large set of Javascript objects thus improving performance. Read the docs.
Note: One should wisely read the documentation before using this setup to churn the best of these tools.
You can either create your own boilerplate code using above libraries or use the one which i am currently using in my project.
https://www.reactboilerplate.com/
This boilerplate is specifically designed for performance. You can customize it based on your needs.
Hope this helps!
I'm dealing with a hand full of javascript objects that i get from an external api-library. I want to store the incoming objects in my react application using redux.
These objects are es2015 classes that also come with two handy methods called fromJSON and toJSON. As i want my redux store to be serializable (as it should be) i need a way to translate them to plain objects (toJSON does that by giving me back a dict). In my application i need to use these Objects as they come from the API since i need the methods attached to them and the api-client also wants these specific objects.
Is this a common need as i can't find much about this online or am i totally going the wrong path? How would i implement such a transformation? I'm currently thinking about attaching the es2015 classes to my action and call toJSON in my reducers. I could then create specific selectors that catch the json from redux and convert them back to the classes using the fromJSON functionality (would i have to memoize them?). These selectors could then be used in mapStateToProps to map then finally to a prop.
Let me know what you think about this and how/if i could improve this process.
Redux says the state SHOULD be serializable. It should be so, because at some point you might need to store the state locally (via some form of localstorage). But this does not mean the state has to consist of plain objects.
For example, lot of projects use Immutable.js objects for their state. There is an overhead serializing Immutable.js objects. But it can be done using transit-immutable-js.
From what I understand this principal is similar to your question.
What I understand from your question is that (whatever you mean by ES2015 classes) are deserializable/serilizable by fromJSON and toJSON methods, which is all you need.
Thus you can use your "API" objects in state and serialize it only when you need to store it locally.
I am using rxjs in a project, the problem I face is that both myBehaviorSubject.value and myBehaviorSubject.getValue() returns the last item pushed into the observable by reference. Can I somehow get that last item by value?
Note: I know I can copy the object with Object.assign but that seems like boilerplate code to me. I am looking for some official method or piece of code what extends it to support this functionality. So what I want to do is something like myBehaviorSubject.getValueByValue() (Sounds strange, I know.)
No, there is nothing in rxjs that does this, and this isn't really in the Rx domain. While observables work best when used with immutable types, rxjs doesn't provide any features in this area. For simple object cloning you can, as you suggest, use something like Object.assign. For collections, I recommend immutable.js. You can (as suggested in the comments) extend BehaviorSubject yourself to include whichever implementation you prefer.
I'm looking to use l10n.js for a project. Seems like defining the localization strings is fairly easy. l10n.js defines the toLocaleString method. Is the input of that call merged or overwritten? I'd like to have two separate inputs into the methods be served into one and I'm trying to figure out the best way to do so.
Yes. A comment in the source suggests that the store of translations is extended when String.toLocaleSource is called. Looking further reveals that existing strings are overwritten and new ones are added next to the existing ones.