Как заменить Redux на React Hooks и контекстный API

Пример контактов

В этом примере мы создадим базовую страницу CRUD для управления контактами. Он будет состоять из пары презентационных компонентов и контейнера. Также будет объект контекста для управления состоянием контактов. Поскольку наше дерево состояний будет немного сложнее, чем в предыдущем примере, нам придется использовать хук useReducer .

Создайте контекст объекта context/ContactContext.js и вставьте этот код:

 import { useReducer } from "react"; import _ from "lodash"; import createUseContext from "constate"; // Define the initial state of our app const initialState = { contacts: [ { id: "098", name: "Diana Prince", email: "[email protected]" }, { id: "099", name: "Bruce Wayne", email: "[email protected]" }, { id: "100", name: "Clark Kent", email: "[email protected]" } ], loading: false, error: null }; // Define a pure function reducer const reducer = (state, action) => { switch (action.type) { case "ADD_CONTACT": return { contacts: [...state.contacts, action.payload] }; case "DEL_CONTACT": return { contacts: state.contacts.filter(contact => contact.id != action.payload) }; case "START": return { loading: true }; case "COMPLETE": return { loading: false }; default: throw new Error(); } }; // Define your custom hook that contains your state, dispatcher and actions const useContacts = () => { const [state, dispatch] = useReducer(reducer, initialState); const { contacts, loading } = state; const addContact = (name, email) => { dispatch({ type: "ADD_CONTACT", payload: { id: _.uniqueId(10), name, email } }); }; const delContact = id => { dispatch({ type: "DEL_CONTACT", payload: id }); }; return { contacts, loading, addContact, delContact }; }; // Share your custom hook export const useContactsContext = createUseContext(useContacts); 

Создайте родительский компонент views/Contacts.jsx и вставьте этот код:

 import React from "react"; import { Segment, Header } from "semantic-ui-react"; import ContactForm from "../components/ContactForm"; import ContactTable from "../components/ContactTable"; import { useContactsContext } from "../context/ContactContext"; export default function Contacts() { return ( // Wrap the components that you want to share your custom hook state <useContactsContext.Provider> <Segment basic> <Header as="h3">Contacts</Header> <ContactForm /> <ContactTable /> </Segment> </useContactsContext.Provider> ); } 

Создайте компоненты components/ContactTable.jsx и вставьте этот код:

 import React, { useState } from "react"; import { Segment, Table, Button, Icon } from "semantic-ui-react"; import { useContactsContext } from "../context/ContactContext"; export default function ContactTable() { // Subscribe to `contacts` state and access `delContact` action const { contacts, delContact } = useContactsContext(); // Declare a local state to be used internally by this component const [selectedId, setSelectedId] = useState(); const onRemoveUser = () => { delContact(selectedId); setSelectedId(null); // Clear selection }; const rows = contacts.map(contact => ( <Table.Row key={contact.id} onClick={() => setSelectedId(contact.id)} active={contact.id === selectedId} > <Table.Cell>{contact.id}</Table.Cell> <Table.Cell>{contact.name}</Table.Cell> <Table.Cell>{contact.email}</Table.Cell> </Table.Row> )); return ( <Segment> <Table celled striped selectable> <Table.Header> <Table.Row> <Table.HeaderCell>Id</Table.HeaderCell> <Table.HeaderCell>Name</Table.HeaderCell> <Table.HeaderCell>Email</Table.HeaderCell> </Table.Row> </Table.Header> <Table.Body>{rows}</Table.Body> <Table.Footer fullWidth> <Table.Row> <Table.HeaderCell /> <Table.HeaderCell colSpan="4"> <Button floated="right" icon labelPosition="left" color="red" size="small" disabled={!selectedId} onClick={onRemoveUser} > <Icon name="trash" /> Remove User </Button> </Table.HeaderCell> </Table.Row> </Table.Footer> </Table> </Segment> ); } 

Создайте компоненты components/ContactForm.jsx и вставьте этот код:

 import React, { useState } from "react"; import { Segment, Form, Input, Button } from "semantic-ui-react"; import { useContactsContext } from "../context/ContactContext"; export default function ContactForm() { const name = useFormInput(""); const email = useFormInput(""); // Consume the context store to access the `addContact` action const { addContact } = useContactsContext(); const onSubmit = () => { addContact(name.value, email.value); // Reset Form name.onReset(); email.onReset(); }; return ( <Segment basic> <Form onSubmit={onSubmit}> <Form.Group widths="3"> <Form.Field width={6}> <Input placeholder="Enter Name" {...name} required /> </Form.Field> <Form.Field width={6}> <Input placeholder="Enter Email" {...email} type="email" required /> </Form.Field> <Form.Field width={4}> <Button fluid primary> New Contact </Button> </Form.Field> </Form.Group> </Form> </Segment> ); } function useFormInput(initialValue) { const [value, setValue] = useState(initialValue); function handleChange(e) { setValue(e.target.value); } function handleReset() { setValue(""); } return { value, onChange: handleChange, onReset: handleReset }; } 

Вставьте следующий код в App.jsx соответственно:

 import Contacts from "./views/Contacts"; //... <Container> <h1>React Hooks Context Demo</h1> {/* <Counter /> */} <Contacts /> </Container>; 

После реализации кода страница вашего браузера должна обновиться. Чтобы удалить контакт, сначала нужно выбрать строку, а затем нажать кнопку «Удалить». Чтобы создать новый контакт, просто заполните форму и нажмите кнопку «Новый контакт».

Пройдите код, чтобы убедиться, что вы все понимаете. Прочитайте комментарии, которые я включил в код.

Резюме

Надеюсь, что оба эти примера дают отличное понимание того, как вы можете управлять состоянием общего приложения без Redux. Если бы вы переписали эти примеры без хуков и контекстного API, это привело бы к гораздо большему количеству кода. Вы должны использовать контекстный API только там, где это применимо. Реквизиты должны были быть использованы в этих примерах, если это не учебник.

Вы могли заметить во втором примере, что есть пара неиспользуемых переменных состояния, т.е. loading и error . В качестве проблемы, вы можете продвинуть это приложение дальше, чтобы использовать их. Например, вы можете реализовать ложную задержку и заставить компоненты презентации отображать состояние загрузки. Вы также можете пойти дальше и получить доступ к настоящему удаленному API. Здесь переменная состояния error может пригодиться при отображении сообщений об ошибках.

Единственный вопрос, который вы можете задать себе сейчас: нужен ли Redux для будущих проектов? Один недостаток, который я видел с этой техникой, заключается в том, что вы не можете использовать Redux DevTool Addon для отладки состояния вашего приложения. Тем не менее, это может измениться в будущем с разработкой нового инструмента. Очевидно, как разработчику, вам все равно нужно будет изучить Redux, чтобы поддерживать устаревшие проекты. Если вы начинаете новый проект, вам нужно будет спросить себя и свою команду, действительно ли использование библиотеки управления состоянием необходимо для вашего случая.