{"id":114,"date":"2024-08-21T03:34:47","date_gmt":"2024-08-21T03:34:47","guid":{"rendered":"https:\/\/www.yehger.com\/?p=114"},"modified":"2024-08-21T03:34:47","modified_gmt":"2024-08-21T03:34:47","slug":"react-using-use-immer","status":"publish","type":"post","link":"https:\/\/www.yehger.com\/index.php\/2024\/08\/21\/react-using-use-immer\/","title":{"rendered":"React using “use-immer”"},"content":{"rendered":"

Using immer to manage object.<\/h2>\n
import React from "react";\nimport { useImmer } from "use-immer";\n\nfunction App() {\n  const [person, updatePerson] = useImmer({\n    name: "Michel",\n    age: 33\n  });\n\n  function updateName(name) {\n    updatePerson(draft => {\n      draft.name = name;\n    });\n  }\n\n  function becomeOlder() {\n    updatePerson(draft => {\n      draft.age++;\n    });\n  }\n\n  return (\n    <div className="App">\n      <h1>\n        Hello {person.name} ({person.age})\n      <\/h1>\n      <input\n        onChange={e => {\n          updateName(e.target.value);\n        }}\n        value={person.name}\n      \/>\n      <br \/>\n      <button onClick={becomeOlder}>Older<\/button>\n    <\/div>\n  );\n}<\/code><\/pre>\n
using immer to manage single value.<\/h2>\n
import React from 'react';\nimport { useImmer } from 'use-immer';\n\nfunction BirthDayCelebrator(){\n  const [age, setAge] = useImmer(20);\n\n  function birthDay(event){\n    setAge(age + 1);\n    alert(`Happy birthday #${age} Anon! hope you good`);\n  }\n\n  return(\n    <div>\n      <button onClick={birthDay}>It is my birthday<\/button>\n    <\/div>\n  );\n}<\/code><\/pre>\n
using immer reducer<\/h2>\n
import React from "react";\nimport { useImmerReducer } from "use-immer";\n\nconst initialPerson = {\n    name:"",\n    age:18,\n    birthday:1988,\n    health:100\n};\n\nfunction FormReducer(draft,action) {\n    switch(action){\n        case 'attack':\n            return draft.health--\n        case 'treat':\n            return draft.health++\n        case 'reset':\n            return initialPerson\n    }\n}\n\nfunction Counter() {\n  const [person,dispathPerson] = useImmerReducer(FormReducer, initialPerson);\n  return (\n    <>\n      Count: {state.count}\n      <button onClick={() => dispathPerson("attack")}>been attack<\/button>\n      <button onClick={() => dispathPerson("treat")}>been treat<\/button>\n      <button onClick={() => dispathPerson("reset")}>reset property<\/button>\n    <\/>\n  );\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
Using immer to manage object. import React from "react"; import { useImmer } from "use-immer"; function App() { const [person,… Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-114","post","type-post","status-publish","format-standard","hentry","category-react-study"],"_links":{"self":[{"href":"https:\/\/www.yehger.com\/index.php\/wp-json\/wp\/v2\/posts\/114","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.yehger.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.yehger.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.yehger.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.yehger.com\/index.php\/wp-json\/wp\/v2\/comments?post=114"}],"version-history":[{"count":1,"href":"https:\/\/www.yehger.com\/index.php\/wp-json\/wp\/v2\/posts\/114\/revisions"}],"predecessor-version":[{"id":115,"href":"https:\/\/www.yehger.com\/index.php\/wp-json\/wp\/v2\/posts\/114\/revisions\/115"}],"wp:attachment":[{"href":"https:\/\/www.yehger.com\/index.php\/wp-json\/wp\/v2\/media?parent=114"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.yehger.com\/index.php\/wp-json\/wp\/v2\/categories?post=114"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.yehger.com\/index.php\/wp-json\/wp\/v2\/tags?post=114"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}