Here's a link to a basic code pen that syncs an <input> tag with a Gun instance, and wires Gun updates to React setState.
https://codepen.io/anon/pen/weJxNO?editors=0011
What I expect:
When you open the program in several windows, you can type in one window and see the updates in the others. Typing in one window alters the Gun store, which then causes all instances to propagate events, thus re-rendering all the React components across windows.
What actually happens:
If you open the program in several windows, observe that typing in one window changes the localStorage value for all windows. Yet only the window in which you are actually typing registers events from the Gun store.
Possible solution:
I understand I can set up a single Gun instance on a server that all my clients commune with. But isn't this antithetical to Gun's purpose? The advantage of p2p systems is that you don't need a central source of authority.
Question restated:
How do I wire the program so that all Gun instances fire change events, thus updating every React component across windows, without a central server?
Relevant code from Codepen:
class App extends React.Component {
constructor() {
super()
this.state = {name: ''};
this.gun = Gun()
}
componentDidMount() {
this.gun.get('user').on(
({ name }) =>
this.setState({ name }))
}
render() {
return <div>
<h1>Hey, {this.state.name || '(your name here)'}</h1>
<input
value={this.state.name}
placeholder="edit your name here"
onChange={({ target }) =>
this.gun.get('user')
.put({ name: target.value })}
/>
<p>you should see updates in multiple browser windows</p>
<p>you can see your localStorgae update every time you type in other windows</p>
<p>but the state is only set when you type in this window</p>
</div>
}
}
