diff --git a/_posts/2021-9-27-gun-for-react-state-management.md b/_posts/2021-9-27-gun-for-react-state-management.md index c8861cf..1b73a12 100644 --- a/_posts/2021-9-27-gun-for-react-state-management.md +++ b/_posts/2021-9-27-gun-for-react-state-management.md @@ -1,13 +1,15 @@ --- layout: post -title: "Gun.js: The Best Solution for React State Management" +title: "Gun.js: Painless 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 +image: https://siriusbusiness.fi/assets/images/posts/painless.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. @@ -25,29 +27,29 @@ const State = new Gun({ Then create a React component that uses the state: ```jsx -class CommentForm extends React.Component { +class TextInput extends React.Component { constructor() { super(); - this.state = {comment:''}; + this.state = {text:''}; } componentDidMount() { - State.get('comment').on(comment => this.setState({comment})); + State.get('text').on(text => this.setState({text})); } onInput(e) { - State.get('comment').put(e.target.value); + State.get('text').put(e.target.value); } render() { return (
); } } ``` -Now you have a comment form that syncs its content across component instances and persists it in localStorage. +Now you have a text form that syncs its content across component instances and persists it in localStorage. See the working example on [Codepen](https://codepen.io/mmalmi/pen/VwWVdKG). \ No newline at end of file diff --git a/assets/images/posts/painless.jpg b/assets/images/posts/painless.jpg new file mode 100644 index 0000000..a1ecebc Binary files /dev/null and b/assets/images/posts/painless.jpg differ