The Ultimate Guide to React Development with Hooks and Redux: A Comprehensive Course by Alam Asadullah

Author:Alam, Asadullah
Language: eng
Format: epub, pdf
Published: 2023-04-02T00:00:00+00:00

Controlled Inputs for Filters

Controlled inputs are a crucial part of any web application that uses filters. In this chapter, I will be discussing how to implement controlled inputs for filters using React and Redux.

To begin with, let's understand what controlled inputs are. In a controlled input, the value of the input field is controlled by React state. This means that the state of the input field is updated whenever the user enters any input in the field. In contrast, uncontrolled inputs do not have a state associated with them, and their value is only accessible through the DOM.

Now, let's move on to the implementation of controlled inputs for filters. In our application, we will have a filter component that will have multiple input fields for the user to enter filter values. We will maintain the state of each input field using the React useState hook.

Here is an example of a filter component with two input fields:

import React, { useState } from 'react';

const Filter = () => {

const [nameFilter, setNameFilter] = useState('');

const [ageFilter, setAgeFilter] = useState('');

const handleNameFilterChange = (event) => {

setNameFilter(event.target.value);

};

const handleAgeFilterChange = (event) => {

setAgeFilter(event.target.value);

};

return (

<div>

<label htmlFor="name-filter">Name:</label>

<input

id="name-filter"

type="text"

value={nameFilter}

onChange={handleNameFilterChange}

/>

<label htmlFor="age-filter">Age:</label>

<input

id="age-filter"

type="number"

value={ageFilter}

onChange={handleAgeFilterChange}

/>

</div>

);

};

export default Filter;

In this example, we have two input fields, one for filtering by name and the other for filtering by age. We are maintaining the state of each input field using the useState hook. The handleNameFilterChange and handleAgeFilterChange functions are used to update the state of the respective input fields whenever the user enters any input.

Now that we have the filter component set up with controlled inputs, we need to connect it to our Redux store. We will create a Redux slice for our filter state and use the useSelector and useDispatch hooks to read and update the filter state.

import { createSlice } from '@reduxjs/toolkit';

export const filterSlice = createSlice({

name: 'filter',

initialState: {

name: '',

age: '',

},

reducers: {

setNameFilter: (state, action) => {

state.name = action.payload;

},

setAgeFilter: (state, action) => {

state.age = action.payload;

},

},

});

export const { setNameFilter, setAgeFilter } = filterSlice.actions;

export default filterSlice.reducer;

In this example, we have created a filter slice with two actions, setNameFilter and setAgeFilter, to update the name and age filters respectively. We are also initializing the filter state with empty strings for both filters.

Now, we need to use the useSelector hook to read the filter state and the useDispatch hook to dispatch the setNameFilter and setAgeFilter actions whenever the user enters any input in the filter component.

import React from 'react';

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

import { setNameFilter, setAgeFilter } from '../filterSlice';

const Filter = () => {

const nameFilter = useSelector((state) => state.filter.name);

const ageFilter = useSelector((state) => state.filter.age);

const dispatch = useDispatch();

const handleNameFilterChange = (event) => {

dispatch(setNameFilter(event.target.value));

};

const handleAgeFilterChange = (event) => {

dispatch(setAgeFilter(event.target.value));

};

return (

<div>

<label htmlFor="name-filter">Name:</label>

<input

id="name-filter"

type="text"

value={nameFilter}

onChange={handleNameFilterChange}

/>

<label htmlFor="age-filter">Age:</label>

<input

id="age-filter"

type="number"

value={ageFilter}

onChange={handleAgeFilterChange}

/>

</div>

);

};

export default Filter;

In this example, we are using the useDispatch hook to dispatch the setNameFilter and setAgeFilter actions whenever the user enters any input in the filter component. We are also using the useSelector hook to read the name and age filters from the Redux store.

With this implementation, whenever the user enters any input in the filter component, the state of the corresponding input

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.