Codemods

1.9.0の記述にある通り、RTK 2.0のメジャーバージョンでは、createReducerとcreateSlice.extraReducersから「object」引数を削除しました。また、オブジェクトの代わりにコールバックを使用する新しいオプション形式のcreateSlice.reducersを追加しました。

コードベースのアップグレードを簡単にするために、非推奨の「オブジェクト」構文を同等の「ビルダー」構文に自動的に変換する一連のcodemodを公開しました。

codemodsパッケージはNPMで@reduxjs/rtk-codemodsとして入手できます。現在、以下のcodemodsが含まれています。

• createReducerBuilder: 削除されたオブジェクト構文を使用するcreateReducer呼び出しを、ビルダーコールバック構文に移行します。
• createSliceBuilder: extraReducersに削除されたオブジェクト構文を使用するcreateSlice呼び出しを、ビルダーコールバック構文に移行します。
• createSliceReducerBuilder: reducersに依然として標準のオブジェクト構文を使用するcreateSlice呼び出しを、準備されたreducerの使用を含めて、オプションの新しいビルダーコールバック構文に移行します。

codemodsをコードベースに対して実行するには、npx @reduxjs/rtk-codemods <TRANSFORM NAME> path/of/files/ or/some**/*glob.jsを実行してください。

例

npx @reduxjs/rtk-codemods createReducerBuilder ./src

npx @reduxjs/rtk-codemods createSliceBuilder ./packages/my-app/**/*.ts

変更をコミットする前に、コードベースでPrettierを再実行することもお勧めします。

これらのcodemodsは動作するはずですが、より実際のコードベースでのテストとフィードバックをいただけると大変助かります！

変更前

createReducer(initialState, {
  [todoAdded1a]: (state, action) => {
    // stuff
  },
  [todoAdded1b]: (state, action) => action.payload,
})

const slice1 = createSlice({
  name: 'a',
  initialState: {},
  extraReducers: {
    [todoAdded1a]: (state, action) => {
      // stuff
    },
    [todoAdded1b]: (state, action) => action.payload,
  },
})

変更後

createReducer(initialState, (builder) => {
  builder.addCase(todoAdded1a, (state, action) => {
    // stuff
  })

  builder.addCase(todoAdded1b, (state, action) => action.payload)
})

const slice1 = createSlice({
  name: 'a',
  initialState: {},

  extraReducers: (builder) => {
    builder.addCase(todoAdded1a, (state, action) => {
      // stuff
    })

    builder.addCase(todoAdded1b, (state, action) => action.payload)
  },
})