improve state integration examples

Author: yyx990803

src/guide/extras/reactivity-in-depth.md

@@ -373,17 +373,15 @@ import { shallowRef } from 'vue'
 
 export function useImmer(baseState) {
   const state = shallowRef(baseState)
-
-  return {
-    state,
-    update(updater) {
-      state.value = produce(state.value, updater)
-    }
+  const update = (updater) => {
+    state.value = produce(state.value, updater)
   }
+
+  return [state, update]
 }
 ```
 
-[Try it in the Playground](https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHNjcmlwdCBzZXR1cD5cbmltcG9ydCB7IHVzZUltbWVyIH0gZnJvbSAnLi9pbW1lci5qcydcbiAgXG5jb25zdCB7IHN0YXRlOiBpdGVtcywgdXBkYXRlIH0gPSB1c2VJbW1lcihbXG4gIHtcbiAgICAgdGl0bGU6IFwiTGVhcm4gVnVlXCIsXG4gICAgIGRvbmU6IHRydWVcbiAgfSxcbiAge1xuICAgICB0aXRsZTogXCJVc2UgVnVlIHdpdGggSW1tZXJcIixcbiAgICAgZG9uZTogZmFsc2VcbiAgfVxuXSlcblxuZnVuY3Rpb24gdG9nZ2xlSXRlbShpbmRleCkge1xuICB1cGRhdGUoaXRlbXMgPT4ge1xuICAgIGl0ZW1zW2luZGV4XS5kb25lID0gIWl0ZW1zW2luZGV4XS5kb25lXG4gIH0pXG59XG48L3NjcmlwdD5cblxuPHRlbXBsYXRlPlxuICA8dWw+XG4gICAgPGxpIHYtZm9yPVwiKHsgdGl0bGUsIGRvbmUgfSwgaW5kZXgpIGluIGl0ZW1zXCJcbiAgICAgICAgOmNsYXNzPVwieyBkb25lIH1cIlxuICAgICAgICBAY2xpY2s9XCJ0b2dnbGVJdGVtKGluZGV4KVwiPlxuICAgICAgICB7eyB0aXRsZSB9fVxuICAgIDwvbGk+XG4gIDwvdWw+XG48L3RlbXBsYXRlPlxuXG48c3R5bGU+XG4uZG9uZSB7XG4gIHRleHQtZGVjb3JhdGlvbjogbGluZS10aHJvdWdoO1xufVxuPC9zdHlsZT4iLCJpbXBvcnQtbWFwLmpzb24iOiJ7XG4gIFwiaW1wb3J0c1wiOiB7XG4gICAgXCJ2dWVcIjogXCJodHRwczovL3NmYy52dWVqcy5vcmcvdnVlLnJ1bnRpbWUuZXNtLWJyb3dzZXIuanNcIixcbiAgICBcImltbWVyXCI6IFwiaHR0cHM6Ly91bnBrZy5jb20vaW1tZXJAOS4wLjcvZGlzdC9pbW1lci5lc20uanM/bW9kdWxlXCJcbiAgfVxufSIsImltbWVyLmpzIjoiaW1wb3J0IHByb2R1Y2UgZnJvbSBcImltbWVyXCJcbmltcG9ydCB7IHNoYWxsb3dSZWYgfSBmcm9tICd2dWUnXG5cbmV4cG9ydCBmdW5jdGlvbiB1c2VJbW1lcihiYXNlU3RhdGUpIHtcbiBcdCBjb25zdCBzdGF0ZSA9IHNoYWxsb3dSZWYoYmFzZVN0YXRlKVxuICAgXG4gICByZXR1cm4ge1xuICAgICBzdGF0ZSxcbiAgICAgdXBkYXRlKHVwZGF0ZXIpIHtcbiAgICAgICBzdGF0ZS52YWx1ZSA9IHByb2R1Y2Uoc3RhdGUudmFsdWUsIHVwZGF0ZXIpXG4gICAgIH1cbiAgIH1cbn1cbiJ9)
+[Try it in the Playground](https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHNjcmlwdCBzZXR1cD5cbmltcG9ydCB7IHVzZUltbWVyIH0gZnJvbSAnLi9pbW1lci5qcydcbiAgXG5jb25zdCBbaXRlbXMsIHVwZGF0ZUl0ZW1zXSA9IHVzZUltbWVyKFtcbiAge1xuICAgICB0aXRsZTogXCJMZWFybiBWdWVcIixcbiAgICAgZG9uZTogdHJ1ZVxuICB9LFxuICB7XG4gICAgIHRpdGxlOiBcIlVzZSBWdWUgd2l0aCBJbW1lclwiLFxuICAgICBkb25lOiBmYWxzZVxuICB9XG5dKVxuXG5mdW5jdGlvbiB0b2dnbGVJdGVtKGluZGV4KSB7XG4gIHVwZGF0ZUl0ZW1zKGl0ZW1zID0+IHtcbiAgICBpdGVtc1tpbmRleF0uZG9uZSA9ICFpdGVtc1tpbmRleF0uZG9uZVxuICB9KVxufVxuPC9zY3JpcHQ+XG5cbjx0ZW1wbGF0ZT5cbiAgPHVsPlxuICAgIDxsaSB2LWZvcj1cIih7IHRpdGxlLCBkb25lIH0sIGluZGV4KSBpbiBpdGVtc1wiXG4gICAgICAgIDpjbGFzcz1cInsgZG9uZSB9XCJcbiAgICAgICAgQGNsaWNrPVwidG9nZ2xlSXRlbShpbmRleClcIj5cbiAgICAgICAge3sgdGl0bGUgfX1cbiAgICA8L2xpPlxuICA8L3VsPlxuPC90ZW1wbGF0ZT5cblxuPHN0eWxlPlxuLmRvbmUge1xuICB0ZXh0LWRlY29yYXRpb246IGxpbmUtdGhyb3VnaDtcbn1cbjwvc3R5bGU+IiwiaW1wb3J0LW1hcC5qc29uIjoie1xuICBcImltcG9ydHNcIjoge1xuICAgIFwidnVlXCI6IFwiaHR0cHM6Ly9zZmMudnVlanMub3JnL3Z1ZS5ydW50aW1lLmVzbS1icm93c2VyLmpzXCIsXG4gICAgXCJpbW1lclwiOiBcImh0dHBzOi8vdW5wa2cuY29tL2ltbWVyQDkuMC43L2Rpc3QvaW1tZXIuZXNtLmpzP21vZHVsZVwiXG4gIH1cbn0iLCJpbW1lci5qcyI6ImltcG9ydCBwcm9kdWNlIGZyb20gJ2ltbWVyJ1xuaW1wb3J0IHsgc2hhbGxvd1JlZiB9IGZyb20gJ3Z1ZSdcblxuZXhwb3J0IGZ1bmN0aW9uIHVzZUltbWVyKGJhc2VTdGF0ZSkge1xuICBjb25zdCBzdGF0ZSA9IHNoYWxsb3dSZWYoYmFzZVN0YXRlKVxuICBjb25zdCB1cGRhdGUgPSAodXBkYXRlcikgPT4ge1xuICAgIHN0YXRlLnZhbHVlID0gcHJvZHVjZShzdGF0ZS52YWx1ZSwgdXBkYXRlcilcbiAgfVxuXG4gIHJldHVybiBbc3RhdGUsIHVwZGF0ZV1cbn0ifQ==)
 
 ### State Machines
 
@@ -401,17 +399,13 @@ export function useMachine(options) {
   const service = interpret(machine)
     .onTransition((newState) => (state.value = newState))
     .start()
+  const send = (event) => service.send(event)
 
-  return {
-    state,
-    send(event) {
-      service.send(event)
-    }
-  }
+  return [state, send]
 }
 ```
 
-[Try it in the Playground](https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHNjcmlwdCBzZXR1cD5cbmltcG9ydCB7IHVzZU1hY2hpbmUgfSBmcm9tICcuL21hY2hpbmUuanMnXG4gIFxuY29uc3QgeyBzdGF0ZSwgc2VuZCB9ID0gdXNlTWFjaGluZSh7XG4gIGlkOiAndG9nZ2xlJyxcbiAgaW5pdGlhbDogJ2luYWN0aXZlJyxcbiAgc3RhdGVzOiB7XG4gICAgaW5hY3RpdmU6IHsgb246IHsgVE9HR0xFOiAnYWN0aXZlJyB9IH0sXG4gICAgYWN0aXZlOiB7IG9uOiB7IFRPR0dMRTogJ2luYWN0aXZlJyB9IH1cbiAgfVxufSlcbjwvc2NyaXB0PlxuXG48dGVtcGxhdGU+XG4gIDxidXR0b24gQGNsaWNrPVwic2VuZCgnVE9HR0xFJylcIj5cbiAgICB7eyBzdGF0ZS5tYXRjaGVzKFwiaW5hY3RpdmVcIikgPyBcIk9mZlwiIDogXCJPblwiIH19XG4gIDwvYnV0dG9uPlxuPC90ZW1wbGF0ZT4iLCJpbXBvcnQtbWFwLmpzb24iOiJ7XG4gIFwiaW1wb3J0c1wiOiB7XG4gICAgXCJ2dWVcIjogXCJodHRwczovL3NmYy52dWVqcy5vcmcvdnVlLnJ1bnRpbWUuZXNtLWJyb3dzZXIuanNcIixcbiAgICBcInhzdGF0ZVwiOiBcImh0dHBzOi8vdW5wa2cuY29tL3hzdGF0ZUA0LjI3LjAvZXMvaW5kZXguanM/bW9kdWxlXCJcbiAgfVxufSIsIm1hY2hpbmUuanMiOiJpbXBvcnQgeyBjcmVhdGVNYWNoaW5lLCBpbnRlcnByZXQgfSBmcm9tICd4c3RhdGUnXG5pbXBvcnQgeyBzaGFsbG93UmVmIH0gZnJvbSAndnVlJ1xuXG5leHBvcnQgZnVuY3Rpb24gdXNlTWFjaGluZShvcHRpb25zKSB7XG4gIGNvbnN0IG1hY2hpbmUgPSBjcmVhdGVNYWNoaW5lKG9wdGlvbnMpXG4gIGNvbnN0IHN0YXRlID0gc2hhbGxvd1JlZihtYWNoaW5lLmluaXRpYWxTdGF0ZSlcbiAgY29uc3Qgc2VydmljZSA9IGludGVycHJldChtYWNoaW5lKVxuICBcdC5vblRyYW5zaXRpb24obmV3U3RhdGUgPT4gc3RhdGUudmFsdWUgPSBuZXdTdGF0ZSlcbiAgICAuc3RhcnQoKVxuICByZXR1cm4ge1xuICAgIHN0YXRlLFxuICAgIHNlbmQoZXZlbnQpIHtcbiAgICAgIHNlcnZpY2Uuc2VuZChldmVudClcbiAgICB9XG4gIH1cbn0ifQ==)
+[Try it in the Playground](https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHNjcmlwdCBzZXR1cD5cbmltcG9ydCB7IHVzZU1hY2hpbmUgfSBmcm9tICcuL21hY2hpbmUuanMnXG4gIFxuY29uc3QgW3N0YXRlLCBzZW5kXSA9IHVzZU1hY2hpbmUoe1xuICBpZDogJ3RvZ2dsZScsXG4gIGluaXRpYWw6ICdpbmFjdGl2ZScsXG4gIHN0YXRlczoge1xuICAgIGluYWN0aXZlOiB7IG9uOiB7IFRPR0dMRTogJ2FjdGl2ZScgfSB9LFxuICAgIGFjdGl2ZTogeyBvbjogeyBUT0dHTEU6ICdpbmFjdGl2ZScgfSB9XG4gIH1cbn0pXG48L3NjcmlwdD5cblxuPHRlbXBsYXRlPlxuICA8YnV0dG9uIEBjbGljaz1cInNlbmQoJ1RPR0dMRScpXCI+XG4gICAge3sgc3RhdGUubWF0Y2hlcyhcImluYWN0aXZlXCIpID8gXCJPZmZcIiA6IFwiT25cIiB9fVxuICA8L2J1dHRvbj5cbjwvdGVtcGxhdGU+IiwiaW1wb3J0LW1hcC5qc29uIjoie1xuICBcImltcG9ydHNcIjoge1xuICAgIFwidnVlXCI6IFwiaHR0cHM6Ly9zZmMudnVlanMub3JnL3Z1ZS5ydW50aW1lLmVzbS1icm93c2VyLmpzXCIsXG4gICAgXCJ4c3RhdGVcIjogXCJodHRwczovL3VucGtnLmNvbS94c3RhdGVANC4yNy4wL2VzL2luZGV4LmpzP21vZHVsZVwiXG4gIH1cbn0iLCJtYWNoaW5lLmpzIjoiaW1wb3J0IHsgY3JlYXRlTWFjaGluZSwgaW50ZXJwcmV0IH0gZnJvbSAneHN0YXRlJ1xuaW1wb3J0IHsgc2hhbGxvd1JlZiB9IGZyb20gJ3Z1ZSdcblxuZXhwb3J0IGZ1bmN0aW9uIHVzZU1hY2hpbmUob3B0aW9ucykge1xuICBjb25zdCBtYWNoaW5lID0gY3JlYXRlTWFjaGluZShvcHRpb25zKVxuICBjb25zdCBzdGF0ZSA9IHNoYWxsb3dSZWYobWFjaGluZS5pbml0aWFsU3RhdGUpXG4gIGNvbnN0IHNlcnZpY2UgPSBpbnRlcnByZXQobWFjaGluZSlcbiAgICAub25UcmFuc2l0aW9uKChuZXdTdGF0ZSkgPT4gKHN0YXRlLnZhbHVlID0gbmV3U3RhdGUpKVxuICAgIC5zdGFydCgpXG4gIGNvbnN0IHNlbmQgPSAoZXZlbnQpID0+IHNlcnZpY2Uuc2VuZChldmVudClcblxuICByZXR1cm4gW3N0YXRlLCBzZW5kXVxufSJ9)
 
 ### RxJS