React hooksとuse-immerを使いながらTypescriptでreduxっぽいことをする
3420 ワード
use-immer
https://github.com/immerjs/use-immer
テストrepo
https://github.com/github0013/react-hooks-immer-redux-typescript
yarn && yarn developで動きます
- reducerを作る
リンク1 - use-immerの
useImmerReducerを使ってstateとdispatchを作る
リンク2 - contextを使って、stateとdispatchを保持する
リンク3
https://reactjs.org/docs/context.html
- useContextを使ってを参照する
リンク4
https://reactjs.org/docs/hooks-reference.html#usecontext
問題
通常reducer内ではstateをimmutableにする為に、
switch (action.type) {
case "some_action_name":
return [...state, abc: new_value]
などとする必要がある。結構面倒
useImmerReducerだと...
これをuse-immerのuseImmerReducerを使う事で
switch (action.type) {
case "some_action_name":
// 直接stateをいじれる上に、returnする必要すら無い
state.abc = new_value
として、処理が簡単にかける。
Author And Source
この問題について(React hooksとuse-immerを使いながらTypescriptでreduxっぽいことをする), 我々は、より多くの情報をここで見つけました https://qiita.com/github0013@github/items/1b42cc3e330ad6a10014著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .