A simple data state container for js projects.
I like data container and state management in my js projects but redux and other libraries are so much complex than they have to.
Instead create actions, reducers, containers, merge containers, handle async actions with middlewares and import a lot of libs to use with our favorite frontend framework, I just like to use some like this:
import myContainer from './my-container'
class MyComponent extends React.Component {
constructor(props) {
super(props)
myContainer.myProp.observe(this._handleStateChange.bind(this))
}
_handleStateChange(data) {
//,,,,
}
}
When I want to change data on my container, I like to use in this way:
myContainer.myProp.setValue('foo')
And thats it!
All observers now will receive the new prop value.
In terminal, just run: npm install shelterjs
// import the library
import { Container } from 'shelterjs'
// instance new container (yes, you can have more than one =])
const myContainer = new Container({
// define your properties with their initial values.
props: {
myProp1: 'initial value'
}
})
myContainer.myProp1.observe(value => {
// do something...
})
// you can also take a previous value
myContainer.myProp1.observe((currentValue, previousValue) => {
// do something...
})
const myValue = myContainer.myProp1.getValue()
const myObserverInstance = myContainer.myProp1.observe(value => {
// do something...
})
// when you want to remove the observer, just call:
myObserverInstance.dispose()
myContainer.myProp1.removeAllObservers()
myContainer.myProp1.setValue('the new value')
If you want to add new properties to a existing container, use the createProperty
function:
myContainer.createProperty('foo', 'initial value')
console.log(myContainer.foo.getValue()) // initial value