React JS && Redux (Redux Toolkit)

React JS is a popular JavaScript library used to build user interfaces. It is a component-based library that allows developers to create reusable UI components. Redux, on the other hand, is a state management library that can be used with any JavaScript library, including React.

When used together, React and Redux provide a powerful combination for building complex web applications. Redux Toolkit is a popular extension of the Redux library that simplifies the process of writing Redux code. It provides a set of pre-configured tools that can help developers write efficient and maintainable Redux code.

In summary, the combination of React JS and Redux (with the help of Redux Toolkit) provides a scalable and efficient way of managing state in complex web applications.

This combination is especially useful in applications where data flows through multiple components, as it allows for a centralized and predictable way of managing state. Redux provides a global store where all the application's state is stored, and React components can subscribe to this store to receive updates whenever the state changes.

Data flow example :

Using Redux also promotes separation of concerns, as it keeps the data layer separate from the UI layer. This makes it easier to maintain and test the application, as changes to the data layer do not affect the UI layer.

Overall, if you are building a React application that requires a lot of state management, using Redux (with Redux Toolkit) can be a great way to simplify the process and make your application more efficient and maintainable.

Here’s a working example of how to manage states on codesandbox

Redux Toolkit

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 was originally created to help address three common concerns about Redux:

"Configuring a Redux store is too complicated"

"I have to add a lot of packages to get Redux to do anything useful"

"Redux requires too much boilerplate code"

We can't solve every use case, but in the spirit of create-react-app and apollo-boost, we can provide an official recommended set of tools that handle the most common use cases and reduce the need to make extra decisions.

What's Included

Redux Toolkit includes:

configureStore(): wraps createStore to provide simplified configuration options and good defaults. It can automatically combine your slice reducers, adds whatever Redux middleware you supply, includes redux-thunk by default, and enables use of the Redux DevTools Extension.

createReducer(): that lets you supply a lookup table of action types to case reducer functions, rather than writing switch statements. In addition, it automatically uses the immer library to let you write simpler immutable updates with normal mutative code, like state.todos[3].completed = true.

createAction(): generates an action creator function for the given action type string. The function itself has toString() defined, so that it can be used in place of the type constant.

createSlice(): accepts an object of reducer functions, a slice name, and an initial state value, and automatically generates a slice reducer with corresponding action creators and action types.

createAsyncThunk: accepts an action type string and a function that returns a promise, and generates a thunk that dispatches pending/fulfilled/rejected action types based on that promise

createEntityAdapter: generates a set of reusable reducers and selectors to manage normalized data in the store

The createSelector utility from the Reselect library, re-exported for ease of use.

Redux Toolkit also has a new RTK Query data fetching API. RTK Query is a powerful data fetching and caching tool built specifically for Redux. It is designed to simplify common cases for loading data in a web application, eliminating the need to hand-write data fetching & caching logic yourself.

Documentation

The complete Redux Toolkit documentation is available at https://redux-toolkit.js.org.