Redux Toolkit with React

Implementing Redux in your react app always feels complex because Redux has a lot of boilerplate, Luckily, we have Redux Toolkit now which has reduced a lot of boilerplate codes. In this Blog, we all going to know how the setup up the Redux toolkit with React project

Installation

First, create the react app by this command

npx create-react-app my-app

And to install the Redux Toolkit

npm install @reduxjs/toolkit react-redux

Implementations

We need to create the store.js file inside the src folder and import configure

import { configureStore } from "@reduxjs/toolkit"; 

export const store = configureStore({ 
    reducer: {} 
}) 

Store from the redux toolkit the configure Store accepts one parameter it’s an object of the reducer

Wrap the App.js with the Redux store 

First, import Provider from the react-redux and import the store we have created, and we have to wrap the app.js with Provider and include the store inside of the provider

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

    <Provider store={store}> 
        <App /> 
    </Provider> 

Create the Redux Slice 

The Slice will create an action that we will use for dispatching the action and Reducer that is used in this configureStore  

import { createSlice, createAsyncThunk } from "@reduxjs/toolkit" 

const initialState = { 
    formData: { 
        email: "", 
        name: "" 
    }, 
    submitData: [], 
} 

export const formSlice = createSlice({ 
    name: "forms", 
    initialState, 
    reducers: { 
        onChangevalues: (state, action) => {
            state.formData = action.payload 
        }, 
        submitFormData: (state, action) => { 
            state.submitData.push(state.formData) 
            state.formData = { email: "", name: "" } 
        }, 
    }, 
}) 

export const { submitFormData, onChangevalues } = formSlice.actions 
export default formSlice.reducer 

In this slice I have created two actions one used for the on Change of the Text field and another one is used for the value from the text fields to a new state by the on Click of the submit button

Add reducers to the Store

import { configureStore } from "@reduxjs/toolkit"; 
import formSlice from "./appSlice"; 

export const store = configureStore({ 
    reducer: { 
        forms: formSlice,
   } 
})  

Dispatch and Selectors

useSelector

 

import { useSelector, useDispatch } from 'react-redux'; 

function App() { 
    const { formData, submitData } = useSelector((state) => state.forms) 

Import useSelector from the react-redux and we can destructure every state that we need from the initial state of the redux store and we use form Data for the onChange of the data and submitData is used for the push that onChange Data into Array State

useDispatch 

import { onChangevalues, submitFormData } from './Redux/appSlice'; 
import { useSelector, useDispatch } from 'react-redux'; 

function App() { 
  const dispatch = useDispatch() 
  const { formData, submitData } = useSelector((state) => state.forms) 

  const onInputChange = (e) => { 
    dispatch(onChangevalues({ ...formData, [e.target.name]: e.target.value })) 
  } 

  const handleSubmit = () => { 
    dispatch(submitFormData()) 
  } 

First of all, we need to import useDispatch from the react-redux and Actions that we have created in the appSlice to dispatch those actions, on the onInputChange Function I have dispatched the onChangevalues actions and in the handleSubmit Function dispatched the submitFormData It will the Push values from the Form fields to array state that we have created. 

Now we have a Separate component for the Form and extract the data from that form using the useDispatch hook from react-redux and binding that data in another component using the useSelector