Comments (9)
You can define a global state in a module and use an event to update and push the new global state to other components:
import app;
const global_state = {
counter: 0
};
app.on('update-global-state', (delta) => {
const new_state = { counter: global_state.counter + delta }
app.run('global-state-changed', new_state)
})
In other components:
import app, { Component } from 'apprun';
export default class MyComponent extends Component {
state = {}
view = (state) => {
return <div>
{state.global_state.count}
<button onclick={app.run('update-global-state', 1)}>+1</button>
<button onclick={app.run('update-global-state', -1)}>-1</button>
</div>
}
update = {
'global-state-changed': (state, global_state) => ({ ...state, global_state })
}
}
from apprun.
Having a globally shared state is possible. It is also possible to dispatch mutations/actions to the global state. However, the state is not reactive/observable. You do need to publish an event to advertise the change.
Vuex, Redux and AppRun pretty much all follow the Flux pattern:
Action => Dispatch => Store => View
The difference is how to refresh the View when the Store has changes.
Vuex gets the changes of the Store into the View using Vue's reactive system.
Redux Store has a store.subscribe function. The View subscribes to get the changes and refresh.
AppRun favor events over the reactive system.
(event) => Store => (event) => View
from apprun.
i read this soon after asking this question
https://medium.com/@yiyisun/deep-dive-into-apprun-state-3d6fb58b1521
but then , there will be instances where it makes sense to share state between/amongst components. hwo do you achieve that
from apprun.
After you change the global state, you publish a global event to let other components take action on it.
from apprun.
How and where is this global state defined if i may ask. seeing that each component has state, view and update objects
from apprun.
Me here again. I am looking at a scenario where the global shared state is reactive/observable like what you have in vuex. having to implement change event listeners and publishers everywhere manually might lead to loose ends . Is this possible ?
from apprun.
@yysun thanks so much for the explanation.
from apprun.
@yysun Me here again on global state, seeing the implementation of apprun-reactive using @nx-js/observer-util, it seems one can possibly get reactivity in a global state using observable properties and observers for (computed events). Can i use @nx-js/observer-util on a global state object /class as discussed above , or can the apprun-reactive decorator be used outside of a component. I am more interested in how a reactive state change from a global state object can cause a re-render of the view reflecting that change. I would rather not use event listeners to respond to state changes
from apprun.
Here are two examples of reactivity.
https://apprun.js.org/#play/17
https://apprun.js.org/#play/18
from apprun.
Related Issues (20)
- How to handle file drop? HOT 1
- Update URL in the browser's address bar when SPA component activates HOT 4
- How to avoid triggering components initial event handler on form submit? HOT 2
- Problem using input element with list attribute HOT 2
- No jest in default SPA HOT 1
- Broken Link in docs HOT 1
- Example of child component updating parent's state? HOT 2
- Two-way bound textbox loses focus on input HOT 3
- First page always blank in sample. HOT 1
- Components within HTML string view pattern HOT 4
- Discord link on the website is broken HOT 1
- Can I use other libraries in place of lit-html? HOT 7
- global values created for ESM version HOT 1
- Cannot GET / HOT 4
- How to put 'selected' on <option>? HOT 3
- lit-html code not working in the docs HOT 2
- can we insert any html frame using apprun HOT 4
- `for` attribute on `label`s doesn't work HOT 1
- $binding with Autofill
- Is this still maintained or is there gonna be major version in the future? 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 apprun.