@reduxjs/toolkit 1.9.5

The @reduxjs/toolkit is the official, opinionated, and batteries-included toolset designed for efficient Redux development. It aims to simplify Redux logic, addressing common concerns about Redux's complexity, the need for additional packages to make Redux useful, and the boilerplate code required by Redux. The toolkit includes powerful features like auto-merging of reducers, Redux middleware addition, chainable action creators, and normalized data management in the Redux store. It also comes with a separate powerful data fetching and caching utility dubbed “RTK Query,” which eliminates the need to write data fetching logic from scratch.

To use the @reduxjs/toolkit, you first need to install it into your project using NPM or Yarn:

# Using NPM
npm install @reduxjs/toolkit

# Using Yarn
yarn add @reduxjs/toolkit

Once installed, you can use it in your Redux store configuration. Here are some examples:

Redux Store with @reduxjs/toolkit:

import { configureStore } from '@reduxjs/toolkit'
import rootReducer from './rootReducer'

const store = configureStore({
  reducer: rootReducer
})

export default store;

Action creation with @reduxjs/toolkit:

import { createAction } from '@reduxjs/toolkit'

export const increment = createAction('counter/increment')

Reducer creation with @reduxjs/toolkit:

import { createReducer } from '@reduxjs/toolkit'
import { increment } from './counterActions'

const counter = createReducer(0, {
  [increment]: (state, action) => state + action.payload,
})

export default counter;

The RTK Query can specifically be used for data fetching and caching scenarios:

import { createApi } from '@reduxjs/toolkit/query/react'
import { fetchBaseQuery } from '@reduxjs/toolkit/query'

export const api = createApi({
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
  endpoints: (builder) => ({
    getUser: builder.query({
      query: (name) => `user/${name}`,
    }),
  }),
})

export const { useGetUserQuery } = api

Note that this barely scratches the surface of what can be done with @reduxjs/toolkit.

The official documentation for @reduxjs/toolkit is available on the Redux Toolkit website at https://redux-toolkit.js.org. This includes more detailed explanations and examples of the toolkit's API methods, information about its purpose and what it includes, an overview and guide to using the included RTK Query tool, and more. The docs are comprehensive and provide a good grounding in how to use the toolkit effectively in your Redux development.