REDUX TOOLKIT FUNDAMENTAL

Najmul Ovi — Fri, 04 Mar 2022 12:08:55 +0000

Why Redux Toolkit?
We know that Redux was a popular option for state management. It makes states predictable. Reducers are pure functions that means the same state and actions are passed will always result in the same output.
Redux also easily maintainable, scalable, efficient testing, easy debugging and better performance that Redux brings to build applications.

However, this flexible and high-level state management library comes with a few challenges:

Too much code to configure store.
Too much boilerplate code.
Too many packages needed to install to build scalable apps.
Writing actions and reducers becomes more complex on large applications.

To overcome these challenges, The Redux team came up with Redux Toolkit. It's main purpose is to speed up Redux development by including Redux Core with the packages that they think are essential to build a Redux app. It also makes our code and folder structure more understandable and organized.

How We Started With Redux Toolkit?

Step 1: Packages Install

npm install @reduxjs/toolkit react-redux

or,

npx create-react-app my-app --template redux

Step 2: Initialize & Create Store
We can create store.js file

import { configureStore } from '@reduxjs/toolkit'

export default configureStore({
  reducer: {} //add reducers here
})

Step 3: Provide Store in React app
In our index.js file

import store from './store'
import { Provider } from 'react-redux'

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

Step 4: Reducers and Actions

import { createSlice } from '@reduxjs/toolkit'

export const counterSlice = createSlice({
  name: 'counter',
  initialState: {
    value: 0
  },
  reducers: {
    increase: state => {
      state.value += 1
    },
    decrease: state => {
      state.value -= 1
    }
  }
})

// each case under reducers becomes an action
export const { increase, decrease } = counterSlice.actions

export default counterSlice.reducer

Step 5: Import Reducer to Store

import { configureStore } from '@reduxjs/toolkit'
import counterReducer from '.counterSlice' //import our reducer from step 4

export default configureStore({
  reducer: {
    counter: counterReducer //add our reducer from step 4
  }
})

Step 6: Dispatch Actions from UI

import { useSelector, useDispatch } from 'react-redux'
import { decrease, increase } from './counterSlice'

REDUX FUNDAMENTAL

Najmul Ovi — Thu, 24 Feb 2022 12:13:59 +0000

What is Redux?
Redux is a state management library for JavaScript applications. If we want to share state data from one component to another, we need passes from parent component to child component in the form of props. Using Redux we don't need props drilling to share data from one component to another because Redux is considered as a central store. Context APIs solve similar problems as Redux in this age, but Redux is better option for large scale applications where we need handle many state.

Image Source: codecentric

Three Core Principle of Redux

1. Store: It provides a universal data storage. We can create Redux store using createStore(). We must pass reducer as its first parameter. It takes an optional second parameter as 'initialState' and an optional 'middleware' which allows us to pass multiple middlewares like 'thunk', 'redux-logger', etc.
2. Actions: Actions are kind of events and they are just objects. When an event is trigged inside the application, then an action created which give instructions to update the state.
3. Reducers: When the action is dispatched and sent to the store, then the store holds the application state and updates the state by using the reducer function.
Finally, Update states are sent to UI.

Benefits of Redux

Predictable state changes
Centralized state
Easy debugging
Preserve page state
Implement Undo/Redo features
Large & growing Ecosystem of add-ons

Disadvantages of Redux

Complexity
Need to write some boiler plate code to get things done

When not to use Redux

Tight budget
Small to medium size applications
Simple UI/data flow
Static data

Forem: Najmul Ovi

REDUX TOOLKIT FUNDAMENTAL

REDUX FUNDAMENTAL