Help us understand the problem. What is going on with this article?

ImmerでRedux周りをスッキリさせたい

前提

- react,reduxでフロント開発中
- 「Immerjs便利」とすすめられる
- 「そもそもイミュータブルってなんだ?」

使うライブラリ:GitHub - immerjs/immer: Create the next immutable state by mutating the current one

そもそもイミュータブルとは

  • 「イミュータブル(immutable)」
    • 不変、変わらない
  • プログラミングにおいて「イミュータブル」とは?
    • オブジェクトの状態が変更されないこと
    • redux等はイミュータブルを実現してる

簡単なサンプルコード:codepen

const array = {
  test1: '国語',
  test2: '理科',
  test3: '算数',
}

console.log({array});

// ミュータブル
// arrayの値が変わってしまう
array['test1'] = '英語';
console.log({array});

// イミュータブル
// arrayの値は変えず、新しいオブジェクトを生成する
const array2 = {...array, test1:'英語'};
console.log({array2});

Immerjs導入

  • 導入にあたって
    • 上述のイミュータブルのいいところは既にReduxがやってくれてる
    • 期待するのは、記述の簡素化
      • スプレッド演算子があんまり好きじゃない
        • newState={...state, todo1: 'マヨネーズ買う'}
        • 一回くらいならいいけど、reducerは...stateばっかになる。コード見づらい
      • オブジェクトの階層が深くなると分かりづらくなる

サンプルコード

GitHub - immerjs/immer:より引用です。

↓ Reduxデフォの書き方

// Redux reducer
// Shortened, based on: https://github.com/reactjs/redux/blob/master/examples/shopping-cart/src/reducers/products.js
const byId = (state, action) => {
    switch (action.type) {
        case RECEIVE_PRODUCTS:
            return {
                ...state,
                ...action.products.reduce((obj, product) => {
                    obj[product.id] = product
                    return obj
                }, {})
            }
        default:
            return state
    }
}

↓ immerjs使った場合

import produce from "immer"

const byId = (state, action) =>
    produce(state, draft => {
        switch (action.type) {
            case RECEIVE_PRODUCTS:
                action.products.forEach(product => {
                    draft[product.id] = product
                })
        }
    })

導入した感想

  • reducerがスッキリした
    • スプレッド演算子なくって万歳
  • draftという単語に慣れない
    • 別の命名も思いつかない
    • 慣れの問題だと思うので使い続ける
  • 次はimmerjs/use-immerも使ってみる
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした