Skip to main content

 

Other Exports

Redux Toolkit exports some of its internal utilities, and re-exports additional functions from other dependencies as well.

nanoid​

An inlined copy of nanoid/nonsecure. Generates a non-cryptographically-secure random ID string. createAsyncThunk uses this by default for request IDs. May also be useful for other cases as well.

import { nanoid } from '@reduxjs/toolkit'

console.log(nanoid())
// 'dgPXxUz_6fWIQBD8XmiSy'

miniSerializeError​

The default error serialization function used by createAsyncThunk, based on https://github.com/sindresorhus/serialize-error. If its argument is an object (such as an Error instance), it returns a plain JS SerializedError object that copies over any of the listed fields. Otherwise, it returns a stringified form of the value: { message: String(value) }.

export interface SerializedError {
  name?: string
  message?: string
  stack?: string
  code?: string
}

export function miniSerializeError(value: any): SerializedError {}

copyWithStructuralSharing​

A utility that will recursively merge two similar objects together, preserving existing references if the values appear to be the same. This is used internally to help ensure that re-fetched data keeps using the same references unless the new data has actually changed, to avoid unnecessary re-renders. Otherwise, every re-fetch would likely cause the entire dataset to be replaced and all consuming components to always re-render.

If either of the inputs are not plain JS objects or arrays, the new value is returned.

export function copyWithStructuralSharing<T>(oldObj: any, newObj: T): T
export function copyWithStructuralSharing(oldObj: any, newObj: any): any {}

Exports from Other Libraries​

createNextState​

The default immutable update function from the immer library, re-exported here as createNextState (also commonly referred to as produce)

current​

The current function from the immer library, which takes a snapshot of the current state of a draft and finalizes it (but without freezing). Current is a great utility to print the current state during debugging, and the output of current can also be safely leaked outside the producer.

import { createReducer, createAction, current } from '@reduxjs/toolkit'

interface Todo {
  //...
}
const addTodo = createAction<Todo>('addTodo')

const initialState = [] satisfies Todo[] as Todo[]

const todosReducer = createReducer(initialState, (builder) => {
  builder.addCase(addTodo, (state, action) => {
    state.push(action.payload)
    console.log(current(state))
  })
})

original​

The original function from the immer library, which returns the original object. This is particularly useful for referential equality check in reducers.

isDraft​

The isDraft function from the immer library, which checks to see if a given value is a Proxy-wrapped "draft" state.

freeze​

The freeze function from the immer library, which freezes draftable objects.

combineReducers​

Redux's combineReducers, re-exported for convenience. While configureStore calls this internally, you may wish to call it yourself to compose multiple levels of slice reducers.

compose​

Redux's compose. It composes functions from right to left. This is a functional programming utility. You might want to use it to apply several store custom enhancers/ functions in a row.

bindActionCreators​

Redux's bindActionCreators. It wraps action creators with dispatch() so that they dispatch immediately when called.

createStore​

Redux's createStore. You should not need to use this directly.

applyMiddleware​

Redux's applyMiddleware. You should not need to use this directly.

Last updated on