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): Texport 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.

original#

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

import { createReducer, createAction, current } from '@reduxjs/toolkit'
interface Todo {  //...}const addTodo = createAction<Todo>('addTodo')
const initialState = [] as Todo[]
const todosReducer = createReducer(initialState, (builder) => {  builder.addCase(addTodo, (state, action) => {    state.push(action.payload)    console.log(current(state))  })})

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.