Redux

Redux is a predictable state container for JavaScript apps.

It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. On top of that, it provides a great developer experience, such as live code editing combined with a time traveling debugger.

You can use Redux together with React, or with any other view library. It is tiny (2kB, including dependencies), but has a large ecosystem of addons available.

Redux Toolkit is our official recommended approach for writing Redux logic. It wraps around the Redux core, and contains packages and functions that we think are essential for building a Redux app. Redux Toolkit builds in our suggested best practices, simplifies most Redux tasks, prevents common mistakes, and makes it easier to write Redux applications.

RTK includes utilities that help simplify many common use cases, includingstore setup, creating reducers and writing immutable update logic, and even creating entire “slices” of state at once.

Whether you’re a brand new Redux user setting up your first project, or an experienced user who wants to simplify an existing application, Redux Toolkit can help you make your Redux code better.

Installation

Redux Toolkit​

Redux Toolkit is available as a package on NPM for use with a module bundler or in a Node application:

Why Redux Toolkit is How To Use Redux Today

What is Redux Toolkit?

Redux Toolkit(also known as “RTK” for short) is our official recommended approach for writing Redux logic. The @reduxjs/toolkit package wraps around the core redux package, and contains API methods and common dependencies that we think are essential for building a Redux app. Redux Toolkit builds in our suggested best practices, simplifies most Redux tasks, prevents common mistakes, and makes it easier to write Redux applications.

RTK includes utilities that help simplify many common use cases, including store setup, creating reducers and writing immutable update logic, and even creating entire “slices” of state at once.

Whether you’re a brand new Redux user setting up your first project, or an experienced user who wants to simplify an existing application, Redux Toolkit can help you make your Redux code better.

How Redux Toolkit Is Different Than the Redux Core?

What Is “Redux”?​

The first thing to ask is, “what is Redux?”

Redux is really:

• A single store containing “global” state
• Dispatching plain object actions to the store when something happens in the app
• Pure reducer functions looking at those actions and returning immutably updated state

While it’s not required, 

• Action creators that generate those action objects
• Middleware to enable side effects
• Thunk functions that contain sync or async logic with side effects
• Normalized state to enable looking up items by ID
• Memoized selector functions with the Reselect library for optimizing derived data
• The Redux DevTools Extension to view your action history and state changes
• TypeScript types for actions, state, and other functions

Additionally, Redux is normally used with the React-Redux library to let your React components talk to a Redux store.

What Does the Redux Core Do?​

The Redux core is a very small and deliberately unopinionated library. It provides a few small API primitives:

• createStore to actually create a Redux store
• combineReducers to combine multiple slice reducers into a single larger reducer
• applyMiddleware to combine multiple middleware into a store enhancer
• compose to combine multiple store enhancers into a single store enhancer

Other than that, all the other Redux-related logic in your app has to be written entirely by you.

The good news is that this means Redux can be used in many different ways. The bad news is that there are no helpers to make any of your code easier to write.

For example, a reducer function is just a function. Prior to Redux Toolkit, you’d typically write that reducer with a switch statement and manual updates. You’d also probably have hand-written action creators and action type constants along with it:

None of this code specifically depends on any API from the redux core library. But, this is a lot of code to write. Immutable updates required a lot of hand-written object spreads and array operations, and it was very easy to make mistakes and accidentally mutate state in the process (always the #1 cause of Redux bugs!). It was also common, though not strictly required, to spread the code for one feature across multiple files like actions/todos.js, constants/todos.js, and reducers/todos.js.

Additionally, store setup usually required a series of steps to add commonly used middleware like thunks and enable Redux DevTools Extension support, even though these are standard tools used in almost every Redux app.

What Does Redux Toolkit Do?

While these were the patterns originally shown in the Redux docs, they unfortunately require a lot of very verbose and repetitive code. Most of this boilerplate isn’t necessary to use Redux. On top of that, the boilerplate-y code lead to more opportunities to make mistakes.

We specifically created Redux Toolkit to eliminate the “boilerplate” from hand-written Redux logic, prevent common mistakes, and provide APIs that simplify standard Redux tasks.

Redux Toolkit starts with two key APIs that simplify the most common things you do in every Redux app:

• configureStore sets up a well-configured Redux store with a single function call, including combining reducers, adding the thunk middleware, and setting up the Redux DevTools integration. It also is easier to configure than createStore, because it takes named options parameters.
• createSlice lets you write reducers that use the Immer library to enable writing immutable updates using “mutating” JS syntax like state.value = 123, with no spreads needed. It also automatically generates action creator functions for each reducer, and generates action type strings internally based on your reducer’s names. Finally, it works great with TypeScript.

Why We Want You To Use Redux Toolkit

The “boilerplate” and complexity of the early Redux patterns was never a necessary part of Redux. Those patterns only existed because:

• The original “Flux Architecture” used some of those same approaches
• The early Redux docs showed things like action type constants to enable separating code into different files by type
• JavaScript is a mutable language by default, and writing immutable updates required manual object spreads and array updates
• Redux was originally built in just a few weeks and intentionally designed to be just a few API primitives

Additionally, the Redux community has adopted some specific approaches that add additional boilerplate:

• Emphasizing use of the redux-saga middleware as a common approach for writing side effects
• Insisting on hand-writing TS types for Redux action objects and creating union types to limit what actions can be dispatched at the type level

Over the years, we’ve seen how people actually used Redux in practice. We’ve seen how the community wrote hundreds of add-on libraries for tasks like generating action types and creators, async logic and side effects, and data fetching. We’ve also seen the problems that have consistently caused pain for our users, like accidentally mutating state, writing dozens of lines of code just to make one simple state update, and having trouble tracing how a codebase fits together. We’ve helped thousands of users who were trying to learn and use Redux and struggling to understand how all the pieces fit together, and were confused by the number of concepts and amount of extra code they had to write. We know what problems our users are facing.

Application Development Company In Junagadh