I have recently started to work on React, however I came across one issue. I have set up Routes, for different sites. Though in one of the classes, I have an Object, with given values. On the other hand, I have another class, where I want to fill out certain input fields with these values from the object. Is there a way, to use values across Routes?
You can store the data in a store if you are using Flux, or in a state if using Redux. If you can share some more information about your project, I might be able to help with it better.
Related
I have created a component in the components section and named it "hero_type_1", now I want to create a parent component and want to use the previous component as an attribute but now I am unable to see the added component in the existing components select box.
After going through the Strapi forum I got to know that that I can add it manually in the json code, but just want to understand why it is not available there in the list and how can I make it available here without doing anything manually. Thanks :)
i think strapi only supports nesting of components up to 2 levels deep in the admin dashboard. You can do more levels, but you would need to do that manually in the schema JSON files and are not able to manage these components via the admin dashboard.
They said it is because of performance concerns, but personally I think it would be a must have, since it's extremely limited with only 2 levels, but I do manage these via the JSON file, since there is no easy way to change that for now.
I'm working on a large project built with vue. We are using vuex as the state management system but their are some components where I don't need to access their data anywhere else. So, Is it right to store this data in the component data or stick with the convention and store it in a vuex module.
Thanks in advance.
You need to use Vuex store if the data must be accessible by multiple (independent) components. There are several reasons why you shouldn't store everything in Vuex store.
First things first complexity! If you are building a complex Vuex store you can not use effectively as your project grows.
On the other hand if you're filling your store with unnecessary states, all the states will executed in the first load in the initial JS and the more data will increase the payloads and that occurs longer load of the webapp.
So the best thing what you can do it is keep your local states locally until is it possible, und use Vuex when the communication of independent components is needed.
You can keep data with in your components. You can convert your non data sharing components to Functional Components link here.
Vue process functional components faster than normal one. By converting to functional one you will gain some performance boost.
It is totally fine to keep data with in the components if you don't need to access it globally.
When you create more than one Function Components, You must create keys for them too. You can find the whole conversation here. I gave all the details there with code samples as well.
ENJOY CODING....
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 am using react-table (https://www.npmjs.com/package/react-table) and I need to keep the filters active with the values that I had entered initially even on navigation from the page until I remove them myself. How do I implement this?
There are many ways to do this. You can use a global store like redux or Mobx to keep the data and populate your views from there (if you don't know how to use any global stores yet, learn now and get it over with).
not recommended you can pass the data you want to preserve in between routes using your navigation library. But don't do that. This approach would almost immediately start creating problems with maintainability for oyu.
I'm working in a big project which we develop a Dashboard that display the user lots of data in different ways, charts tables and more.
The user has the power to filter the data, add filter expressions, filter data from table and mutate it.
Sometimes i feel really like i need a state container that will manage all of this data because it really gets hard for me to debug a problem or adding a new feature.
I would like your advice about what state container to use with angularjs (1.4.8)?
And what are the best ways to implement it on a big written project?
I have worked on similar kind of work on which you are working on. I made a dashboard, which shows a lot of data using different plots( line, volcano, bar, heatmaps) and there was a way to interact all of them and filtering data and all.
For that purpose, I used angular-redux. Its very nice as at each interaction you can get your complete state object. That is managable and makes debugging very easier.
For that I followed angular-redux doc to make its configuration. Also, there is one chrome extension redux-devtools, which shows all of your actions and state after each action. That helps you to keep tract on your state model.
If you want more info on redux, there are some good doc, which you can read.
redux-basics(1) redux-basics(2)
By looking at your need, I would recommend you to use redux.
Hopefully this will be helpful for u. If you need any other info, Let me know