Redux Toolkit-A standard way to write redux

MD Zahid Hasan — Fri, 04 Mar 2022 19:48:32 +0000

What is Redux Toolkit?
Redux Toolkit is the new reliable way to consist of Redux into your project. It attempts to resolve a number of the common issues developers expressed in using the original Redux package. along with an excessive amount of setup, too complex, and desiring too many addon applications to function. With the toolkit, there may be much less configuration and a lot more work is performed under the hood and middlewares had been included with async thunks. while the original Redux package become very unopinionated and allowed you to choose which packages you desired to use with it, the new Redux Toolkit is opinionated as it comes with those packages out of the sector. you can consider Redux Toolkit as the Create React App for Redux as it comes with matters that will help get you started faster.

API includes Redux Toolkit

configureStore(): wraps createStore to provide simplified configuration options and good defaults. it could automatically integrate your slice reducers, provides something Redux middleware you supply, consists of redux-thunk by default, and enables the use of the Redux DevTools Extension.

createReducer(): Reducer support directly mapping specific action types to case reducer function that will update the state when that action is dispatched.

createAction(): Based on given action type string it generates a action creator function.This function has its own toString() method so that it can be used as a type constant.

createSlice(): createSlice is a higher-order function that accepts an initial state, an object full reducer function, and a slice name. it automatically generates action creators and action types that correspond to the reducers and state.

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.

createSelector(): Selectors typically expect the Redux state object as an argument, while slice reducers only have access to a specific subset of the entire Redux state.

Redux-A technology to know

MD Zahid Hasan — Fri, 25 Feb 2022 11:31:50 +0000

What is Redux?

Considering Javascript Redux is a predictable state management library and for React, Redux is the most popular State container. It basically helps to avoid the Prop drilling nature of React. It holds all the states within the app and each component have access to this store. The core concepts of Redux are:

The Store: Everything that changes within an app is actually represented by a javascript object called the store. Store stored all the states of an application.

Application state is immutable: When states changes in an application Redux clone the state object and modify it and it replaces the original state with the new copy.

Reducers: Reducers are pure JavaScript functions that perform the action to update the state and return the new state. It takes the current value of a state, takes the action depending on the action type, and returns the new state.

Redux data flow:

Store stores the states
Event occurs in the UI
That Event dispatch an action
In a predictable way, Reducer updates the states
UI accept the updated states

Advantages of Redux:

Redux can be used client and server-side both.
Redux is easy to test and also optimizes the performance of the application.
We can easily persist some of state to the local store.
We can maintain Redux easily

Disadvantages of Redux:

In a small project, everyone tries to avoid complex patterns like Redux.
When data come from a single data source per view.

DEV Community: MD Zahid Hasan

Redux Toolkit-A standard way to write redux

Redux-A technology to know