Let's say that somewhere in our application we fetch a list of users and the following interface describes the user object.
interface User { address: string; createdAt: string; email: string; firstName: string; id: number; lastName: string; phone: string; updatedAt: string; } Then we have a function component that renders each user's first and last name next to a checkbox.
import React from 'react'; import { useSelector } from 'react-redux'; import { usersSelector } from './selectors'; function UserList(): JSX.Element { const users = useSelector(usersSelector); return ( <ul> {users.map(({ firstName, id, lastName }, index) => ( <li key={index}> <input type="checkbox" value={id} /> {firstName} {lastName} </li> ))} </ul> ) } Each time a checkbox is clicked we need to send a request to an endpoint with the following payload.
interface Payload { selectedUsers: number[]; } The only thing that changes is the payload, so let's keep it in a state.
import React, { useState } from 'react'; import { useSelector } from 'react-redux'; import { usersSelector } from './selectors'; function UserList(): JSX.Element { const users = useSelector(usersSelector); const [selectedUsers, setSelectedUsers] = useState<number[]>([]); return ( <ul> {users.map(({ firstName, id, lastName }, index) => ( <li key={index}> <input checked={selectedUsers.includes(id)} type="checkbox" value={id} /> {firstName} {lastName} </li> ))} </ul> ) } Now let's add a handler to update our payload on each checkbox click.
import xor from 'lodash/xor'; import React, { useState } from 'react'; import { useSelector } from 'react-redux'; import { usersSelector } from './selectors'; function UserList(): JSX.Element { const users = useSelector(usersSelector); const [selectedUsers, setSelectedUsers] = useState<number[]>([]); const handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => { const target = event.target; const value = target.value; setSelectedUsers(prev => xor(prev, [value])); } return ( <ul> {users.map(({ firstName, id, lastName }, index) => ( <li key={index}> <input checked={selectedUsers.includes(id)} onChange={handleChange} type="checkbox" value={id} /> {firstName} {lastName} </li> ))} </ul> ) } Let's run an effect on every UI update to make that request.
import xor from 'lodash/xor'; import React, { useEffect, useState } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { selectUsers } from './actions'; import { usersSelector } from './selectors'; function UserList(): JSX.Element { const dispatch = useDispatch(); const users = useSelector(usersSelector); const [selectedUsers, setSelectedUsers] = useState<number[]>([]); useEffect(() => { dispatch(selectUsers(selectedUsers)); }, [dispatch, selectedUsers]); const handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => { const target = event.target; const value = target.value; setSelectedUsers(prev => xor(prev, [value])); } return ( <ul> {users.map(({ firstName, id, lastName }, index) => ( <li key={index}> <input checked={selectedUsers.includes(id)} onChange={handleChange} type="checkbox" value={id} /> {firstName} {lastName} </li> ))} </ul> ) } Usually, we'd get a response back with the selectedUsers so as last step we would like to indicate the selected users in our UI as well.
// function UserList(): JSX.Element { const users = useSelector(usersSelector); const selectedUsersFromState = useSelector( selectedUsersFromStateSelector ); const [selectedUsers, setSelectedUsers] = useState<number[]>( selectedUsersFromState ); // 
Top comments (0)