mirror of
https://github.com/mmalmi/mmalmi.github.io.git
synced 2025-06-23 16:05:39 +00:00
gun for react state management
This commit is contained in:
parent
5c4f01cb81
commit
3b3ba584b3
@ -2,7 +2,7 @@
|
|||||||
layout: post
|
layout: post
|
||||||
title: "How to Fund Open Source Software"
|
title: "How to Fund Open Source Software"
|
||||||
date: 2020-11-12 07:37:00 +0000
|
date: 2020-11-12 07:37:00 +0000
|
||||||
tags: economics
|
tags: economics software
|
||||||
published: true
|
published: true
|
||||||
description: "It’s time to talk about survival and growth of open source software projects."
|
description: "It’s time to talk about survival and growth of open source software projects."
|
||||||
image: https://siriusbusiness.fi/assets/images/posts/letsfindout.jpeg
|
image: https://siriusbusiness.fi/assets/images/posts/letsfindout.jpeg
|
||||||
|
38
_posts/2021-9-27-gun-for-react-state-management.md
Normal file
38
_posts/2021-9-27-gun-for-react-state-management.md
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
---
|
||||||
|
layout: post
|
||||||
|
title: "Gun.js: The Best Solution for React State Management"
|
||||||
|
date: 2021-9-27 01:37:00 +0000
|
||||||
|
tags: software
|
||||||
|
published: true
|
||||||
|
description: "Better alternative to Redux"
|
||||||
|
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?
|
||||||
|
|
||||||
|
There’s a better alternative: Gun.js. It makes state synchronization and persistence super easy:
|
||||||
|
|
||||||
|
```
|
||||||
|
// Initialize Gun with options to make sure that the state is synced only locally
|
||||||
|
const State = new Gun({multicast: false, peers: [], localStorage: true, file: ‘State.local’});
|
||||||
|
|
||||||
|
class CommentForm {
|
||||||
|
componentDidMount {
|
||||||
|
State.get(‘comment’).on(comment => this.setState({comment}));
|
||||||
|
}
|
||||||
|
|
||||||
|
onInput(e) {
|
||||||
|
State.get(‘comment’).put(e.target.value);
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return {
|
||||||
|
<form>
|
||||||
|
<input type=”text” value={{this.state.comment}} onInput={e => this.onInput(e)} />
|
||||||
|
</form>
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Now you have a comment form that automatically persists its content.
|
Loading…
x
Reference in New Issue
Block a user