Other Exports

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.

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.

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.