codemods.mdx

id	title	sidebar_label	hide_title
codemods	Codemods	Codemods	true

 

Codemods

Per the description in 1.9.0, we have removed the "object" argument from createReducer and createSlice.extraReducers in the RTK 2.0 major version. We've also added a new optional form of createSlice.reducers that uses a callback instead of an object.

To simplify upgrading codebases, we've published a set of codemods that will automatically transform the deprecated "object" syntax into the equivalent "builder" syntax.

The codemods package is available on NPM as @reduxjs/rtk-codemods. It currently contains these codemods:

• createReducerBuilder: migrates createReducer calls that use the removed object syntax to the builder callback syntax
• createSliceBuilder: migrates createSlice calls that use the removed object syntax for extraReducers to the builder callback syntax
• createSliceReducerBuilder: migrates createSlice calls that use the still-standard object syntax for reducers to the optional new builder callback syntax, including uses of prepared reducers

To run the codemods against your codebase, run npx @reduxjs/rtk-codemods <TRANSFORM NAME> path/of/files/ or/some**/*glob.js.

Examples:

npx @reduxjs/rtk-codemods createReducerBuilder ./src

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

We also recommend re-running Prettier on the codebase before committing the changes.

These codemods should work, but we would greatly appreciate testing and feedback on more real-world codebases!

Before:

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,
  },
})

After:

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)
  },
})