Comments (6)
I added a gotchas section and refactored the examples in the recently released v5. Let me know if you think something is missing 🙂
Thanks for the issue!
from react-easy-state.
Each time you import the store I believe you are creating a new store. If you would like to import the same store in multiple files you could make it a singleton class and return the already existing instance.
from react-easy-state.
There is a bug in your code, but it is partly my mistake 🙂 I miscommunicated something.
Your store is not reactive
import { store } from 'react-easy-state'
const destinations = {
add: (destination) => {
destinations.list.push(destination);
},
new: '',
list: [
'Canberra',
'Auckland',
'Berlin',
]
}
export default store(destinations)
You should move the store
wrapping to the top to make it reactive
import { store } from 'react-easy-state'
const destinations = store({
add: (destination) => {
destinations.list.push(destination);
},
new: '',
list: [
'Canberra',
'Auckland',
'Berlin',
]
})
export default destinations
Some context:
Easy State has a principle of never messing with user data. It wraps things with a reactive layer, but it never instruments anything with reactivity directly (by mutating it). The layer can be removed and reapplied at any time. Check this example:
import { store } from 'react-easy-state'
const person = { name: 'Bob' }
const reactivePerson = store(person)
// this triggers renders
reactivePerson.name = 'Rick'
// this does not
person.name = 'Morty'
// both update the underlying person object
// but reactivePerson has a wrapping reactive layer
In your store, you do something like this:
const person = {
// this updates the none reactive raw object
updateName: name => person.name = name
}
// this exports the wrapped reactive object
export default store(person)
This can be avoided by wrapping as early as possible - preferably at definition time:
const person = store({
// this updates the none reactive raw object
updateName: name => person.name = name
})
// this exports the wrapped reactive object
export default person
I will update the docs and examples to reflect this. I never had to deal with this, because I prefer the none arrow method syntax with this
. this
refers to the reactive object, since the method with this
is called on the exported reactive object.
const person = {
// this works, because `this` is the reactive object
// `person` is still the raw none reactive object
updateName (name) {
this.name = name
}
}
export default store(person)
Also updating the examples to have a bit more variety would be nice. Maybe some arrow function methods, decorators and typescript could be added. If you have any working example, I would gladly take it as a contribution 🙂
Edit: just to make it clear, I think this is one of the coolest features of the library and it will stay like this. I just messed up the communication about it.
from react-easy-state.
@bleeinc Objects are singletons in JS and Easy State does not mess with that. If you create a store object, it stays like that - a single object.
from react-easy-state.
Interesting. It makes sense now but it never occurred to me.
Works
const destinations = {
add: function(destination) { this.list.push(destination) },
list: []
}
export default store(destinations)
Works
const destinations = store({
add: function(destination) { this.list.push(destination) },
list: []
})
Works
const destinations = store({
add: (destination) => destinations.list.push(destination)
list: []
})
export default destinations
Incorrect JS / Gives useful error
const destinations = store({
add: (destination) => this.list.push(destination)
list: []
})
export default destinations
Reactivity breaks with no error / Object is updated / Re-renders shows updated list
const destinations = {
add: (destination) => destinations.list.push(destination)
list: []
}
export default store(destinations)
The clearest thing to me would be to write in the docs that store should be used at definition
and make the examples always that way. Then you take account the use of arrow functions and function declarations.
Having said that, I probably would have still done it because in my mind store(obj) == store({})
. I am not sure if you could have a check when in dev mode that would warn people not to do the last example.
You could add a Gotachs / Help / FAQ section and include the last example. Under a heading such as React not re-rendering on change
.
from react-easy-state.
Yeah, that's a nice summary. A Gotchas section would definitely help and will be added. Examples are already refactored in the next branch.
from react-easy-state.
Related Issues (20)
- Component is not getting updated after changes in state
- is the state persistent for react native?
- Iphone IOS10 Safari array map function not work in react render HOT 3
- Share stores in another window?
- autoEffect make ref undefined ? HOT 1
- expo+react-native+jest: unit testing is failing "ReferenceError: You are trying to `import` a file after the Jest environment has been torn down." HOT 1
- State not updating inside Formik render function HOT 1
- Support class stores HOT 1
- @risingstack/react-easy-state: task is not a function
- unstable_batchedUpdates bad import HOT 1
- Support for React Concurrent mode HOT 2
- Continously calling setInterval from library HOT 1
- Support for React Fast Refresh, as it is the replacement for React Hot Reload
- Trace which function made store change
- Exclusion from autoEffect
- Memory leak?
- Autoeffect seems to be randomly deciding not to work.
- Nested store function
- Enable boilerplate with Next.js
- fresh create-react-app doesn't update the state at all when running on the development server 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 react-easy-state.