Comments (2)
Hey @richardanaya
Good question! Since freezer doesn't force you to organize your data in any way I am really interested in knowing how people access to it. I can explain what I do, and it works nice for me.
First, I use to refresh the full app when any change happens in the store, so I don't need to connect components to parts of the store, they will be always re-rendered. I found out that trying to render parts selectively when changes happen in a part of the store is an easy way of get out of sync with the store and makes your app exponentially more complex. It's easier to not to render the components using shouldComponentUpdate
when the store part has not changed, taking advantage of the immutable data.
In my apps I organize the freezer's store by domains. So imagine that I have two entities users
and cars
, I would create two domains in my store like:
{
usersDomain: { /* all the user data here */ },
carsDomain: { /* all the car data here */ }
}
So the challenge is making those domains easily accessible by certain components. For example an Users
component that lists all our app users should access to the usersDomain often.
Currently in my apps I pass the store's state down from the root component to the children using props:
<Child store={ freezer.get() } />
And I create a getDomain function in thoshe children that access often to the same part of the store:
getDomain(){
return this.props.store.userDomain;
}
Add this method to every children is not very beautiful :) So I understand that you miss something like connect
. Creating a higher order component to inject the domain as a prop shouldn't be difficult:
import React from 'react';
import FreezerStore from 'path/to/your/FreezerStore';
export default function connect( Component, domains ) {
return function ConnectedComponent( props ){
var storeDomains = {};
domains.forEach( d => {
storeDomains[d] = FreezerStore.get()[ d + 'Domain' ];
});
return <Component { ...props } { ...storeDomains } />;
}
}
This way we get a connect
function that we can use to make easier the access to the domains, we can build the UsersAndCars
component this way:
import React from 'react';
import connect from 'path/to/connect';
class UsersAndCars extends React.Component {
render(){
// here I can use this.props.users and this.props.cars
}
}
export default connect( UsersAndCars, ['users', 'cars'] );
I have not tried the code above, I have just coded it on the fly, so maybe it's buggy.
I am very interested in your thoughts about the way of organizing the data and also problems you are having with structuring the store with freezer.
from freezer.
Thanks! I like this idea.
On Aug 4, 2016 4:33 AM, "arqex" [email protected] wrote:
Hey @richardanaya https://github.com/richardanaya
Good question! Since freezer doesn't force you to organize your data in
any way I am really interested in knowing how people access to it. I can
explain what I do, and it works nice for me.First, I use to refresh the full app when any change happens in the store,
so I don't need to connect components to parts of the store, they will be
always re-rendered. I found out that trying to render parts selectively
when changes happen in a part of the store is an easy way of get out of
sync with the store and makes your app exponentially more complex. It's
easier to not to render the components using shouldComponentUpdate when
the store part has not changed, taking advantage of the immutable data.In my apps I organize the freezer's store by domains. So imagine that I
have two entities users and cars, I would create two domains in my store
like:{
usersDomain: { /* all the user data here / },
carsDomain: { / all the car data here */ }
}So the challenge is making those domains easily accessible by certain
components. For example an Users component that lists all our app users
should access to the usersDomain often.Currently in my apps I pass the store's state down from the root component
to the children using props:<Child store={ freezer.get() } />
And I create a getDomain function in thoshe children that access often to
the same part of the store:getDomain(){
return this.props.store.userDomain;
}Add this method to every children is not very beautiful :) So I understand
that you miss something like connect. Creating a higher order component
to inject the domain as a prop shouldn't be difficult:import React from 'react';import FreezerStore from 'path/to/your/FreezerStore';
export default function connect( Component, domains ) {
return function ConnectedComponent( props ){
var storeDomains = {};
domains.forEach( d => {
storeDomains[d] = FreezerStore.get()[ d + 'Domain' ];
});return <Component { ...props } { ...storeDomains } />;
}
}This way we get a connect function that we can use to make easier the
access to the domains, we can build the UsersAndCars component this way:import React from 'react';import connect from 'path/to/connect';
class UsersAndCars extends React.Component {
render(){
// here I can use this.props.users and this.props.cars
}
}
export default connect( UsersAndCars, ['users', 'cars'] );I have not tried the code above, I have just coded it on the fly, so maybe
it's buggy.I am very interested in your thoughts about the way of organizing the data
and also problems you are having with structuring the store with freezer.—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#92 (comment), or mute
the thread
https://github.com/notifications/unsubscribe-auth/AAR8mtTUMUVCer7RMv0Up85bXoHv2OIkks5qcbHrgaJpZM4JcC_b
.
from freezer.
Related Issues (20)
- Trigger returns undefined HOT 1
- multiple parents and node invariant check HOT 4
- Cannot sort arrays HOT 4
- always run in transact() mode HOT 4
- bug: nodes of value 0 get affected while updating its empty-array sibling HOT 1
- Typescript definition file HOT 4
- Store doesn't reset between launches. HOT 2
- state not updating when it should HOT 1
- Handle high frequency updates HOT 1
- JavaScript heap out of memory when using freezer-js HOT 2
- MS Edge compatibility issue with processQueue() HOT 6
- Set function is not working HOT 2
- Freezer: Can't add node to the tree. It's already added and freezer is configured to `singleParent: true`
- Object References and relations across state changes? HOT 1
- Bower version not updated HOT 2
- Parents reference of some children not updated after reset HOT 1
- Pivot on whole freezer object? HOT 3
- Interactive blog posts and documentation HOT 1
- Provide a warning when attempting to update the state of an outdated freezer object HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from freezer.