saulteafarmer/mmalmi.github.io
1
0
Fork 0
mirror of https://github.com/mmalmi/mmalmi.github.io.git synced 2025-06-23 16:05:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

.

Browse Source
This commit is contained in:
Martti Malmi 2021-09-27 13:04:25 +03:00
parent b58681bdac
commit 580c934a8f
1 changed files with 13 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
_posts/2021-9-27-gun-for-react-state-management.md
View File

@ -10,17 +10,21 @@ image: https://siriusbusiness.fi/assets/images/posts/cheesecake.jpg
Fed up with writing a ton of Redux boilerplate just to make a form input editable? Fed up with writing a ton of Redux boilerplate just to make a form input editable?
There’s a better alternative: Gun.js. It makes state synchronization and persistence super easy: There’s a better alternative: Gun.js. It makes state synchronization and persistence super easy.
First, initialize Gun with options that make sure the state is synced with localStorage only (not with peers).
```jsx ```jsx
// Initialize Gun with options that make sure the state is synced to localStorage only
const State = new Gun({ const State = new Gun({
localStorage: true, localStorage: true,
file: 'State.local', file: 'State.local', // localStorage key
multicast: false, multicast: false, // on Node.js, Gun would sync with local area network peers over multicast :)
peers: [] peers: [] // this time we don't want to sync with other users
}).get('state'); }).get('state');
```
Then create a React component that uses the state:
```jsx
class CommentForm extends React.Component { class CommentForm extends React.Component {
constructor() { constructor() {
super(); super();
@ -30,7 +34,8 @@ class CommentForm extends React.Component {
State.get('comment').on(comment => this.setState({comment})); State.get('comment').on(comment => this.setState({comment}));
} }
onInput(e) { State.get('comment').put(e.target.value); onInput(e) {
State.get('comment').put(e.target.value);
} }
render() { render() {