One place for hosting & domains

      Redux

      Compreendendo ações assíncronas do Redux com o Redux Thunk


      Introdução

      Por padrão, as ações do Redux são enviadas de forma síncrona, o que é um problema para todos os aplicativos não triviais que precisam se comunicar com uma API externa ou executar efeitos colaterais. O Redux também permite que middleware fique entre uma ação sendo despachada e a ação que atinge os redutores.

      Existem duas bibliotecas de middleware muito populares que permitem efeitos colaterais e ações assíncronas: Redux Thunk e Redux Saga. Neste post, você irá explorar o Redux Thunk.

      Thunk (conversão) é um conceito de programação onde uma função é usada para atrasar a avaliação/cálculo de uma operação.

      O Redux Thunk é um middleware que permite chamar criadores de ação que retornam uma função em vez de um objeto de ação. Essa função recebe o método de expedição do armazenamento, que é usado então para expedir ações síncronas regulares dentro do corpo da função assim que as operações assíncronas forem concluídas.

      Neste artigo, você irá aprender como adicionar o Redux Thunk e como ele pode se encaixar em um aplicativo Todo hipotético.

      Pré-requisitos

      Este post assume que você tenha conhecimento básico do React e do Redux. Confira este post se estiver iniciando com o Redux.

      Este tutorial é construído a partir de um aplicativo Todo hipotético que rastreia tarefas que precisam ser realizadas e foram concluídas. Assume-se que o create-react-app foi usado para gerar um novo aplicativo React, e o redux, react-redux e axios já foram instalados.

      Os detalhes mais finos sobre como criar um aplicativo Todo do zero não serão explicados aqui. Ele será apresentado como um cenário conceitual para evidenciar o Redux Thunk.

      Adicionando o redux-thunk

      Primeiro, use o terminal para navegar até o diretório do projeto e instale o pacote redux-thunk em seu projeto:

      • npm install redux-thunk@2.3.0

      Nota: o Redux Thunk possui apenas 14 linhas de código. Confira aqui o código fonte para aprender sobre como um middleware Redux funciona nos bastidores.

      Agora, aplique o middleware ao criar o armazenamento do seu aplicativo usando o applyMiddleware do Redux. Em um dado aplicativo React com redux e react-redux, seu arquivo index.js deve ficar assim:

      src/index.js

      import React from 'react';
      import ReactDOM from 'react-dom';
      import { Provider } from 'react-redux';
      import { createStore, applyMiddleware } from 'redux';
      import thunk from 'redux-thunk';
      import './index.css';
      import rootReducer from './reducers';
      import App from './App';
      import * as serviceWorker from './serviceWorker';
      
      // use applyMiddleware to add the thunk middleware to the store
      const store = createStore(rootReducer, applyMiddleware(thunk));
      
      ReactDOM.render(
        <Provider store={store}>
          <App />
        </Provider>,
        document.getElementById('root')
      );
      

      Agora, o Redux Thunk é importado e aplicado em seu aplicativo.

      Usando o Redux Thunk em um aplicativo de amostra

      O caso de uso mais comum para o Redux Thunk é para se comunicar de forma assíncrona com uma API externa para recuperar ou salvar dados. O Redux Thunk torna mais fácil expedir ações que seguem o ciclo de vida de uma solicitação para uma API externa.

      Criar um novo item de tarefa pendente normalmente envolve primeiro expedir uma ação para indicar que a criação de um item de tarefa pendente foi iniciado. Em seguida, se o item de tarefa for criado com sucesso e retornado pelo servidor externo, expedindo outra ação com o novo item de tarefa. Caso aconteça um erro e a tarefa não seja salva no servidor, uma ação com o erro pode ser expedida em vez disso.

      Vamos ver como isso seria feito usando o Redux Thunk.

      Em seu componente contêiner, importe a ação e emita-a:

      src/containers/AddTodo.js

      import { connect } from 'react-redux';
      import { addTodo } from '../actions';
      import NewTodo from '../components/NewTodo';
      
      const mapDispatchToProps = dispatch => {
        return {
          onAddTodo: todo => {
            dispatch(addTodo(todo));
          }
        };
      };
      
      export default connect(
        null,
        mapDispatchToProps
      )(NewTodo);
      

      A ação irá usar o Axios para enviar uma solicitação POST ao ponto de extremidade em JSONPlaceholder (https://jsonplaceholder.typicode.com/todos):

      src/actions/index.js

      import {
        ADD_TODO_SUCCESS,
        ADD_TODO_FAILURE,
        ADD_TODO_STARTED,
        DELETE_TODO
      } from './types';
      
      import axios from 'axios';
      
      export const addTodo = ({ title, userId }) => {
        return dispatch => {
          dispatch(addTodoStarted());
      
          axios
            .post(`https://jsonplaceholder.typicode.com/todos`, {
              title,
              userId,
              completed: false
            })
            .then(res => {
              dispatch(addTodoSuccess(res.data));
            })
            .catch(err => {
              dispatch(addTodoFailure(err.message));
            });
        };
      };
      
      const addTodoSuccess = todo => ({
        type: ADD_TODO_SUCCESS,
        payload: {
          ...todo
        }
      });
      
      const addTodoStarted = () => ({
        type: ADD_TODO_STARTED
      });
      
      const addTodoFailure = error => ({
        type: ADD_TODO_FAILURE,
        payload: {
          error
        }
      });
      

      Observe como o criador de ação addTodo retorna uma função em vez do objeto de ação regular. Essa função recebe o método de expedição do armazenamento.

      Dentro do corpo da função, envia-se primeiro uma ação síncrona imediata para o armazenamento para indicar que iniciou-se o salvamento da tarefa pendente com a API externa. Em seguida, você faz a solicitação POST real ao servidor usando o Axios. No caso de uma resposta bem-sucedida do servidor, você expede uma ação de sucesso síncrona com os dados recebidos da resposta, mas para uma resposta de falha, envia-se uma ação síncrona diferente com a mensagem de erro.

      Ao usar uma API externa, como o JSONPlaceholder neste caso, é possível ver o atraso de rede real acontecendo. No entanto, se estiver trabalhando com um servidor de backend local, as respostas de rede podem acontecer muito rapidamente para visualizar o atraso de rede que um usuário real estaria observando. Sendo assim, é possível adicionar um atraso artificial ao desenvolver:

      src/actions/index.js

      // ...
      
      export const addTodo = ({ title, userId }) => {
        return dispatch => {
          dispatch(addTodoStarted());
      
          axios
            .post(ENDPOINT, {
              title,
              userId,
              completed: false
            })
            .then(res => {
              setTimeout(() => {
                dispatch(addTodoSuccess(res.data));
              }, 2500);
            })
            .catch(err => {
              dispatch(addTodoFailure(err.message));
            });
        };
      };
      
      // ...
      

      Para testar cenários de erro, emita manualmente um erro:

      src/actions/index.js

      // ...
      
      export const addTodo = ({ title, userId }) => {
        return dispatch => {
          dispatch(addTodoStarted());
      
          axios
            .post(ENDPOINT, {
              title,
              userId,
              completed: false
            })
            .then(res => {
              throw new Error('addToDo error!');
              // dispatch(addTodoSuccess(res.data));
            })
            .catch(err => {
              dispatch(addTodoFailure(err.message));
            });
        };
      };
      
      // ...
      

      Para fins didáticos, aqui está um exemplo de como o redutor de tarefa pendente poderia ser para lidar com o ciclo de vida completo da solicitação:

      src/reducers/todosReducer.js

      import {
        ADD_TODO_SUCCESS,
        ADD_TODO_FAILURE,
        ADD_TODO_STARTED,
        DELETE_TODO
      } from '../actions/types';
      
      const initialState = {
        loading: false,
        todos: [],
        error: null
      };
      
      export default function todosReducer(state = initialState, action) {
        switch (action.type) {
          case ADD_TODO_STARTED:
            return {
              ...state,
              loading: true
            };
          case ADD_TODO_SUCCESS:
            return {
              ...state,
              loading: false,
              error: null,
              todos: [...state.todos, action.payload]
            };
          case ADD_TODO_FAILURE:
            return {
              ...state,
              loading: false,
              error: action.payload.error
            };
          default:
            return state;
        }
      }
      

      Explorando o getState

      Além de receber o método de expedição do estado, a função retornada por um criador de ação assíncrona com o Redux Thunk também recebe o método getState do armazenamento, de forma que os valores atuais do armazenamento possam ser lidos:

      src/actions/index.js

      export const addTodo = ({ title, userId }) => {
        return (dispatch, getState) => {
          dispatch(addTodoStarted());
      
          console.log('current state:', getState());
      
          // ...
        };
      };
      

      Com o código acima, o estado atual será impresso no console.

      Por exemplo:

      {loading: true, todos: Array(1), error: null}
      

      Usar o getState pode ser útil para lidar com as coisas de maneira diferente dependendo do estado atual. Por exemplo, se quiser limitar o aplicativo a apenas quatro itens de tarefa por vez, você pode retornar da função se o estado já possuir a quantidade máxima de itens de tarefa:

      src/actions/index.js

      export const addTodo = ({ title, userId }) => {
        return (dispatch, getState) => {
          const { todos } = getState();
      
          if (todos.length > 4) return;
      
          dispatch(addTodoStarted());
      
          // ...
        };
      };
      

      Com o código acima, o aplicativo ficará limitado a quatro itens de tarefa.

      Conclusão

      Neste tutorial, você explorou adicionar o Redux Thunk a um aplicativo React para permitir a expedição de ações de maneira assíncrona. Isso é útil ao usar um armazenamento Redux e APIs externas.

      Se quiser aprender mais sobre o React, dê uma olhada em nossa série Como programar no React.js, ou confira nossa página do tópico React para exercícios e projetos de programação.



      Source link

      Асинхронные действия Redux с Redux Thunk


      Введение

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

      Существует две очень популярные библиотеки промежуточного ПО, поддерживающие побочные эффекты и асинхронные действия: Redux Thunk и Redux Saga. В этой статье мы расскажем о Redux Thunk.

      Thunk или преобразователь — это концепция программирования, в которой функция используется для отсрочки оценки или расчета операции.

      Redux Thunk — это промежуточное ПО, позволяющее вызывать создателей действий, которые возвращают функцию вместо объекта действия. Эта функция получает метод обработки магазина, который затем используется для обработки регулярных синхронных действий внутри тела функции после выполнения асинхронных операций.

      Из этой статьи вы узнаете, как добавить Redux Thunk и использовать его для гипотетического приложения Todo.

      Предварительные требования

      Данная статья предполагает, что у вас имеются базовые знания по React и Redux. Вы можете посмотреть эту статью, если только начинаете работать с Redux.

      Этот учебный модуль построен на основе гипотетического приложения Todo, которое отслеживает задачи, требующие выполнения, и уже выполненные задачи. Можно предположить, что приложение create-react-app было использовано для генерирования нового приложения React, и что redux, react-redux и axios уже установлены.

      Здесь не разъясняются более подробные детали процедуры создания приложения Todo с нуля. Оно представлено как концептуальная основа для разъяснения Redux Thunk.

      Добавление redux-thunk

      Прежде всего, используйте терминал для перехода в каталог проекта и установите пакет redux-thunk в ваш проект:

      • npm install redux-thunk@2.3.0

      Примечание. Redux Thunk содержит всего 14 строк кода. Посмотрите исходный код здесь, чтобы узнать о принципах работы промежуточного ПО Redux.

      Примените промежуточное ПО при создании магазина вашего приложения, используя команду Redux applyMiddleware. Если использовать приложение React с redux и react-redux, ваш файл index.js будет выглядеть следующим образом:

      src/index.js

      import React from 'react';
      import ReactDOM from 'react-dom';
      import { Provider } from 'react-redux';
      import { createStore, applyMiddleware } from 'redux';
      import thunk from 'redux-thunk';
      import './index.css';
      import rootReducer from './reducers';
      import App from './App';
      import * as serviceWorker from './serviceWorker';
      
      // use applyMiddleware to add the thunk middleware to the store
      const store = createStore(rootReducer, applyMiddleware(thunk));
      
      ReactDOM.render(
        <Provider store={store}>
          <App />
        </Provider>,
        document.getElementById('root')
      );
      

      Итак, мы импортировали Redux Thunk и добавили его в наше приложение.

      Использование Redux Thunk в образце приложения

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

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

      Давайте посмотрим, как сделать это с помощью Redux Thunk.

      Импортируйте действие в компонент контейнера и обработайте его:

      src/containers/AddTodo.js

      import { connect } from 'react-redux';
      import { addTodo } from '../actions';
      import NewTodo from '../components/NewTodo';
      
      const mapDispatchToProps = dispatch => {
        return {
          onAddTodo: todo => {
            dispatch(addTodo(todo));
          }
        };
      };
      
      export default connect(
        null,
        mapDispatchToProps
      )(NewTodo);
      

      Действие использует Axios для отправки запроса POST на конечную точку в JSONPlaceholder (https://jsonplaceholder.typicode.com/todos):

      src/actions/index.js

      import {
        ADD_TODO_SUCCESS,
        ADD_TODO_FAILURE,
        ADD_TODO_STARTED,
        DELETE_TODO
      } from './types';
      
      import axios from 'axios';
      
      export const addTodo = ({ title, userId }) => {
        return dispatch => {
          dispatch(addTodoStarted());
      
          axios
            .post(`https://jsonplaceholder.typicode.com/todos`, {
              title,
              userId,
              completed: false
            })
            .then(res => {
              dispatch(addTodoSuccess(res.data));
            })
            .catch(err => {
              dispatch(addTodoFailure(err.message));
            });
        };
      };
      
      const addTodoSuccess = todo => ({
        type: ADD_TODO_SUCCESS,
        payload: {
          ...todo
        }
      });
      
      const addTodoStarted = () => ({
        type: ADD_TODO_STARTED
      });
      
      const addTodoFailure = error => ({
        type: ADD_TODO_FAILURE,
        payload: {
          error
        }
      });
      

      Обратите внимание на то, как создатель действия addTodo возвращает функцию вместо обычного объекта действия. Эта функция получает метод обработки из магазина.

      В теле функции вы вначале отправляете немедленное синхронное действие в магазин, чтобы показать, что вы начали сохранение элемента todo с внешним API. Затем вы отправляете на сервер фактический запрос POST, используя Axios. При успешном ответе сервера вы отправляете синхронное действие успеха с данными, полученными в составе ответа, однако в случае неудачи мы отправляем еще одно синхронное действие с сообщением об ошибке.

      При использовании внешнего API, например, JSONPlaceholder в приведенном примере, может возникнуть реальная задержка сети. Однако, если вы работаете с локальным сервером, ответ сети может быть получен слишком быстро, чтобы получить такую же задержку, с какой столкнется конечный пользователь, так что вы можете добавить искусственную задержку при разработке:

      src/actions/index.js

      // ...
      
      export const addTodo = ({ title, userId }) => {
        return dispatch => {
          dispatch(addTodoStarted());
      
          axios
            .post(ENDPOINT, {
              title,
              userId,
              completed: false
            })
            .then(res => {
              setTimeout(() => {
                dispatch(addTodoSuccess(res.data));
              }, 2500);
            })
            .catch(err => {
              dispatch(addTodoFailure(err.message));
            });
        };
      };
      
      // ...
      

      Чтобы протестировать сценарии ошибок, вы можете создать ошибку вручную:

      src/actions/index.js

      // ...
      
      export const addTodo = ({ title, userId }) => {
        return dispatch => {
          dispatch(addTodoStarted());
      
          axios
            .post(ENDPOINT, {
              title,
              userId,
              completed: false
            })
            .then(res => {
              throw new Error('addToDo error!');
              // dispatch(addTodoSuccess(res.data));
            })
            .catch(err => {
              dispatch(addTodoFailure(err.message));
            });
        };
      };
      
      // ...
      

      Для полноты приведем пример того, как может выглядеть редуктор todo для обработки полного жизненного цикла запроса:

      src/reducers/todosReducer.js

      import {
        ADD_TODO_SUCCESS,
        ADD_TODO_FAILURE,
        ADD_TODO_STARTED,
        DELETE_TODO
      } from '../actions/types';
      
      const initialState = {
        loading: false,
        todos: [],
        error: null
      };
      
      export default function todosReducer(state = initialState, action) {
        switch (action.type) {
          case ADD_TODO_STARTED:
            return {
              ...state,
              loading: true
            };
          case ADD_TODO_SUCCESS:
            return {
              ...state,
              loading: false,
              error: null,
              todos: [...state.todos, action.payload]
            };
          case ADD_TODO_FAILURE:
            return {
              ...state,
              loading: false,
              error: action.payload.error
            };
          default:
            return state;
        }
      }
      

      Изучение getState

      После получения метода dispatch от состояния функция, возвращаемая создателем асинхронного действия с Redux Thunk, также получает метод getState магазина, что позволяет прочитать текущие значения магазина:

      src/actions/index.js

      export const addTodo = ({ title, userId }) => {
        return (dispatch, getState) => {
          dispatch(addTodoStarted());
      
          console.log('current state:', getState());
      
          // ...
        };
      };
      

      В вышеперечисленном случае текущее состояние просто распечатывается на консоли.

      Например:

      {loading: true, todos: Array(1), error: null}
      

      Использование getState может быть полезно для того, чтобы обрабатывать действия по-разному в зависимости от текущего состояния. Например, если вы захотите ограничить возможности приложения одновременной обработкой только четырех элементов todo, вы можете выполнять возврат из функции, если состояние уже содержит максимальное количество элементов todo:

      src/actions/index.js

      export const addTodo = ({ title, userId }) => {
        return (dispatch, getState) => {
          const { todos } = getState();
      
          if (todos.length > 4) return;
      
          dispatch(addTodoStarted());
      
          // ...
        };
      };
      

      В вышеуказанном случае приложение сможет работать только с четырьмя элементами todo.

      Заключение

      В этом учебном модуле мы изучили добавление Redux Thunk в приложение React для асинхронной обработки действий. Это полезно при использовании магазина Redux и внешних API.

      Если вы хотите узнать больше о React, почитайте нашу серию «Программирование на React.js» или посмотрите страницу тем React, где вы найдете упражнения и программные проекты.



      Source link

      How To Manage State in React with Redux


      The author selected Creative Commons to receive a donation as part of the Write for DOnations program.

      Introduction

      Redux is a popular data store for JavaScript and React applications. It follows a central principle that data binding should flow in one direction and should be stored as a single source of truth. Redux gained popularity because of the simplicity of the design concept and the relatively small implementation.

      Redux operates according to a few concepts. First, the store is a single object with fields for each selection of data. You update the data by dispatching an action that says how the data should change. You then interpret actions and update the data using reducers. Reducers are functions that apply actions to data and return a new state, instead of mutating the previous state.

      In small applications, you may not need a global data store. You can use a mix of local state and context to manage state. But as your application scales, you may encounter situations where it would be valuable to store information centrally so that it will persist across routes and components. In that situation, Redux will give you a standard way to store and retrieve data in an organized manner.

      In this tutorial, you’ll use Redux in a React application by building a bird watching test application. Users will be able to add birds they have seen and increment a bird each time they see it again. You’ll build a single data store, and you’ll create actions and reducers to update the store. You’ll then pull data into your components and dispatch new changes to update the data.

      Prerequisites

      • You will need a development environment running Node.js; this tutorial was tested on Node.js version 10.22.0 and npm version 6.14.6. To install this on macOS or Ubuntu 18.04, follow the steps in How to Install Node.js and Create a Local Development Environment on macOS or the Installing Using a PPA section of How To Install Node.js on Ubuntu 18.04.

      • A React development environment set up with Create React App, with the non-essential boilerplate removed. To set this up, follow Step 1 — Creating an Empty Project of the How To Manage State on React Class Components tutorial. This tutorial will use redux-tutorial as the project name.

      • You will be using React components, Hooks, and forms in this tutorial, including the useState Hook and custom Hooks. You can learn about components and Hooks in our tutorials How To Manage State with Hooks on React Components and How To Build Forms in React.

      • You will also need a basic knowledge of JavaScript, HTML, and CSS, which you can find in our How To Build a Website With HTML series, How To Build a Website With CSS series, and in How To Code in JavaScript.

      Step 1 — Setting Up a Store

      In this step, you’ll install Redux and connect it to your root component. You’ll then create a base store and show the information in your component. By the end of this step, you’ll have a working instance of Redux with information displaying in your components.

      To start, install redux and react-redux. The package redux is framework agnostic and will connect your actions and reducers. The package react-redux contains the bindings to run a Redux store in a React project. You’ll use code from react-redux to send actions from your components and to pull data from the store into your components.

      Use npm to install the two packages with the following command:

      • npm install --save redux react-redux

      When the component is finished installing, you’ll receive output like this. Your output may be slightly different:

      Output

      ... + [email protected] + [email protected] added 2 packages from 1 contributor, updated 1 package and audited 1639 packages in 20.573s

      Now that you have the packages installed, you need to connect Redux to your project. To use Redux, you’ll need to wrap your root components with a Provider to ensure that the store is available to all child components in the tree. This is similar to how you would add a Provider using React’s native context.

      Open src/index.js:

      Import the Provider component from the react-redux package. Add the Provider to your root component around any other components by making the following highlighted changes to your code:

      redux-tutorial/src/index.js

      import React from 'react';
      import ReactDOM from 'react-dom';
      import './index.css';
      import App from './components/App/App';
      import * as serviceWorker from './serviceWorker';
      import { Provider } from 'react-redux';
      
      ReactDOM.render(
        <React.StrictMode>
          <Provider>
            <App />
          </Provider>
        </React.StrictMode>,
        document.getElementById('root')
      );
      
      // If you want your app to work offline and load faster, you can change
      // unregister() to register() below. Note this comes with some pitfalls.
      // Learn more about service workers: https://bit.ly/CRA-PWA
      serviceWorker.unregister();
      

      Now that you have wrapped your components, it’s time to add a store. The store is your central collection of data. In the next step, you’ll learn to create reducers that will set the default values and update your store, but for now you will hard-code the data.

      Import the createStore function from redux, then pass a function that returns an object. In this case, return an object with a field called birds that points to an array of individual birds. Each bird will have a name and a views count. Save the output of the function to a value called store, then pass the store to a prop called store in the Provider:

      redux-tutorial/src/index.js

      import React from 'react';
      import ReactDOM from 'react-dom';
      import './index.css';
      import App from './components/App/App';
      import * as serviceWorker from './serviceWorker';
      import { Provider } from 'react-redux';
      import { createStore } from 'redux';
      
      const store = createStore(() => ({
        birds: [
          {
            name: 'robin',
            views: 1
          }
        ]
      }));
      
      ReactDOM.render(
        <React.StrictMode>
          <Provider store={store}>
            <App />
          </Provider>
        </React.StrictMode>,
        document.getElementById('root')
      );
      
      // If you want your app to work offline and load faster, you can change
      // unregister() to register() below. Note this comes with some pitfalls.
      // Learn more about service workers: https://bit.ly/CRA-PWA
      serviceWorker.unregister();
      

      Save and close the file. Now that you have some data, you need to be able to display it. Open src/components/App/App.js:

      • nano src/components/App/App.js

      Like with context, every child component will be able to access the store without any additional props. To access items in your Redux store, use a Hook called useSelector from the react-redux package. The useSelector Hook takes a selector function as an argument. The selector function will receive the state of your store as an argument that you will use to return the field you want:

      redux-tutorial/src/components/App/App.js

      import React from 'react';
      import { useSelector } from 'react-redux';
      import './App.css';
      
      function App() {
        const birds = useSelector(state => state.birds);
      
        return <></>
      }
      
      export default App;
      

      Since useSelector is a custom Hook, the component will re-render whenever the Hook is called. That means that the data—birds—will always be up to date.

      Now that you have the data, you can display it in an unordered list. Create a surrounding <div> with a className of wrapper. Inside, add a <ul> element and loop over the birds array with map(), returning a new <li> item for each. Be sure to use the bird.name as a key:

      redux-tutorial/src/components/App/App.js

      import React from 'react';
      import { useSelector } from 'react-redux'
      import './App.css';
      
      function App() {
        const birds = useSelector(state => state.birds);
      
        return (
          <div className="wrapper">
            <h1>Bird List</h1>
            <ul>
              {birds.map(bird => (
                <li key={bird.name}>
                  <h3>{bird.name}</h3>
                  <div>
                    Views: {bird.views}
                  </div>
                </li>
              ))}
            </ul>
          </div>
        );
      }
      
      export default App;
      

      Save the file. Once the file is saved, the browser will reload and you’ll find your bird list::

      List of birds

      Now that you have a basic list, add in the rest of the components you’ll need for your bird watching app. First, add a button to increment the views after the list of views:

      redux-tutorial/src/components/App/App.js

      import React from 'react';
      import { useSelector } from 'react-redux'
      import './App.css';
      
      function App() {
        const birds = useSelector(state => state.birds);
      
        return (
          <div className="wrapper">
            <h1>Bird List</h1>
            <ul>
              {birds.map(bird => (
                <li key={bird.name}>
                  <h3>{bird.name}</h3>
                  <div>
                    Views: {bird.views}
                    <button><span role="img" aria-label="add">➕</span></button>
                  </div>
                </li>
              ))}
            </ul>
          </div>
        );
      }
      
      export default App;
      

      Next, create a <form> with a single <input> before the bird list so a user can add in a new bird. Be sure to surround the <input> with a <label> and to add a type of submit to the add button to make sure everything is accessible:

      redux-tutorial/src/components/App/App.js

      import React from 'react';
      import { useSelector } from 'react-redux'
      import './App.css';
      
      function App() {
        const birds = useSelector(state => state.birds);
      
        return (
          <div className="wrapper">
            <h1>Bird List</h1>
            <form>
              <label>
                <p>
                  Add Bird
                </p>
                <input type="text" />
              </label>
              <div>
                <button type="submit">Add</button>
              </div>
            </form>
            <ul>
              {birds.map(bird => (
                <li key={bird.name}>
                  <h3>{bird.name}</h3>
                  <div>
                    Views: {bird.views}
                    <button><span role="img" aria-label="add">➕</span></button>
                  </div>
                </li>
              ))}
            </ul>
          </div>
        );
      }
      
      export default App;
      

      Save and close the file. Next, open up App.css to add some styling:

      • nano src/components/App/App.css

      Add some padding to the wrapper class. Then capitalize the h3 element, which holds the bird name. Finally, style the buttons. Remove the default button styles on the add <button> and then add a margin to the form <button>.

      Replace the file’s contents with the following:

      redux-tutorial/src/components/App/App.css

      
      .wrapper {
          padding: 20px;
      }
      
      .wrapper h3 {
          text-transform: capitalize;
      }
      
      .wrapper form button {
          margin: 10px 0;
          cursor: pointer;
      }
      
      .wrapper ul button {
          background: none;
          border: none;
          cursor: pointer;
      }
      

      Additionally, give each button a cursor of pointer, which will change the cursor when hovering over the button to indicate to the user that the button is clickable.

      Save and close the file. When you do the browser will refresh with your components:

      Bird watching app with form

      The buttons and form are not connected to any actions yet, and so can not interact with the Redux store. You’ll add the actions in Step 2 and connect them in Step 3.

      In this step, you installed Redux and created a new store for your application. You connected the store to your application using Provider and accessed the elements inside your components using the useSelector Hook.

      In the next step, you’ll create actions and reducers to update your store with new information.

      Step 2 — Creating Actions and Reducers

      Next, you’ll create actions to add a bird and to increment a view. You’ll then make a reducer that will update the information depending on the action type. Finally, you’ll use the reducers to create a default store using combineReducers.

      Actions are the message you send to the data store with the intended change. Reducers take those messages and update the shared store by applying the changes depending on the action type. Your components will send the actions they want your store to use, and your reducers will use actions to update the data in the store. You never call reducers directly, and there are cases where one action may impact several reducers.

      There are many different options for organizing your actions and reducers. In this tutorial, you’ll organize by domain. That means your actions and reducers will be defined by the type of feature they will impact.

      Create a directory called store:

      This directory will contain all of your actions and reducers. Some patterns store them alongside components, but the advantage here is that you have a separate point of reference for the shape of the whole store. When a new developer enters the project, they will be able to read the structure of the store at a glance.

      Make a directory called birds inside the store directory. This will contain the actions and reducers specifically for updating your bird data:

      Next, open up a file called birds.js so that you can start to add actions and reducers. If you have a large number of actions and reducers you may want to split them into separate files, such as birds.actions.js and birds.reducers.js, but when there are only a few it can be easier to read when they are in the same location:

      • nano src/store/birds/birds.js

      First, you are going to create actions. Actions are the messages that you send from a component to your store using a method called dispatch, which you’ll use in the next step.

      An action must return an object with a type field. Otherwise, the return object can include any additional information you want to send.

      Create a function called addBirds that takes a bird as an argument and returns an object containing a type of 'ADD_BIRD' and the bird as a field:

      redux-tutorial/src/store/birds/birds.js

      export function addBird(bird) {
        return {
          type: 'ADD_BIRD',
          bird,
        }
      }
      

      Notice that you are exporting the function so that you can later import and dispatch it from your component.

      The type field is important for communicating with reducers, so by convention most Redux stores will save the type to a variable to protect against misspelling.

      Create a const called ADD_BIRD that saves the string 'ADD_BIRD'. Then update the action:

      redux-tutorial/src/store/birds/birds.js

      const ADD_BIRD = 'ADD_BIRD';
      
      export function addBird(bird) {
        return {
          type: ADD_BIRD,
          bird,
        }
      }
      

      Now that you have an action, create a reducer that will respond to the action.

      Reducers are functions that will determine how a state should change based on actions. The actions don’t make changes themselves; the reducers will take the state and make changes based on actions.

      A reducer receives two arguments: the current state and the action. The current state refers to the state for a particular section of the store. Generally, the name of the reducer will match with a field in the store. For example, suppose you had a store shaped like this:

      {
        birds: [
          // collection of bird objects
        ],
        gear: {
          // gear information
        }
      }
      

      You would create two reducers: birds and gear. The state for the birds reducer will be the array of birds. The state for the gear reducer would be the object containing the gear information.

      Inside birds.js create a reducer called birds that takes state and action and returns the state without any changes:

      redux-tutorial/src/store/birds/birds.js

      const ADD_BIRD = 'ADD_BIRD';
      
      export function addBird(bird) {
        return {
          type: ADD_BIRD,
          bird,
        }
      }
      
      function birds(state, action) {
        return state;
      }
      

      Notice that you are not exporting the reducer. You will not use the reducer directly and instead will combine them into a usable collection that you will export and use to create your base store in index.js. Notice also that you need to return the state if there are no changes. Redux will run all the reducers anytime you dispatch an action, so if you don’t return state you risk losing your changes.

      Finally, since Redux returns the state if there are no changes, add a default state using default parameters.

      Create a defaultBirds array that will have the placeholder bird information. Then update the state to include defaultBirds as the default parameter:

      redux-tutorial/src/store/birds/birds

      const ADD_BIRD = 'ADD_BIRD';
      
      export function addBird(bird) {
        return {
          type: ADD_BIRD,
          bird,
        }
      }
      
      const defaultBirds = [
        {
          name: 'robin',
          views: 1,
        }
      ];
      
      function birds(state=defaultBirds, action) {
        return state;
      }
      

      Now that you have a reducer returning your state, you can use the action to apply the changes. The most common pattern is to use a switch on the action.type to apply changes.

      Create a switch statement that will look at the action.type. If the case is ADD_BIRD, spread out the current state into a new array and add the bird with a single view:

      redux-tutorial/src/store/birds/birds.js

      const ADD_BIRD = 'ADD_BIRD';
      
      export function addBird(bird) {
        return {
          type: ADD_BIRD,
          bird,
        }
      }
      
      const defaultBirds = [
        {
          name: 'robin',
          views: 1,
        }
      ];
      
      function birds(state=defaultBirds, action) {
        switch (action.type) {
          case ADD_BIRD:
            return [
              ...state,
              {
                name: action.bird,
                views: 1
              }
            ];
          default:
            return state;
        }
      }
      

      Notice that you are returning the state as the default value. More importantly, you are not mutating state directly. Instead, you are creating a new array by spreading the old array and adding a new value.

      Now that you have one action, you can create an action for incrementing a view.

      Create an action called incrementBird. Like the addBird action, this will take a bird as an argument and return an object with a type and a bird. The only difference is the type will be 'INCREMENT_BIRD':

      redux-tutorial/src/store/birds/birds.js

      const ADD_BIRD = 'ADD_BIRD';
      const INCREMENT_BIRD = 'INCREMENT_BIRD';
      
      export function addBird(bird) {
        return {
          type: ADD_BIRD,
          bird,
        }
      }
      
      export function incrementBird(bird) {
        return {
          type: INCREMENT_BIRD,
          bird
        }
      }
      
      const defaultBirds = [
        {
          name: 'robin',
          views: 1,
        }
      ];
      
      function birds(state=defaultBirds, action) {
        switch (action.type) {
          case ADD_BIRD:
            return [
              ...state,
              {
                name: action.bird,
                views: 1
              }
            ];
          default:
            return state;
        }
      }
      

      This action is separate, but you will use the same reducer. Remember, the actions convey the change you want to make on the data and the reducer applies those changes to return a new state.

      Incrementing a bird involves a bit more than adding a new bird. Inside of birds add a new case for INCREMENT_BIRD. Then pull the bird you need to increment out of the array using find() to compare each name with the action.bird:

      redux-tutorial/src/store/bird/birds.js

      const ADD_BIRD = 'ADD_BIRD';
      ...
      function birds(state=defaultBirds, action) {
        switch (action.type) {
          case ADD_BIRD:
            return [
              ...state,
              {
                name: action.bird,
                views: 1
              }
            ];
          case INCREMENT_BIRD:
            const bird = state.find(b => action.bird === b.name);
            return state;
          default:
            return state;
        }
      }
      

      You have the bird you need to change, but you need to return a new state containing all the unchanged birds as well as the bird you’re updating. Select all remaining birds with state.filter by selecting all birds with a name that does not equal action.name. Then return a new array by spreading the birds array and adding the bird at the end:

      redux-tutorial/src/store/bird/birds.js

      const ADD_BIRD = 'ADD_BIRD';
      ...
      
      function birds(state=defaultBirds, action) {
        switch (action.type) {
          case ADD_BIRD:
            return [
              ...state,
              {
                name: action.bird,
                views: 1
              }
            ];
          case INCREMENT_BIRD:
            const bird = state.find(b => action.bird === b.name);
            const birds = state.filter(b => action.bird !== b.name);
            return [
              ...birds,
              bird,
            ];
          default:
            return state;
        }
      }
      

      Finally, update the bird by creating a new object with an incremented view:

      redux-tutorial/src/store/bird/birds.js

      const ADD_BIRD = 'ADD_BIRD';
      ...
      function birds(state=defaultBirds, action) {
        switch (action.type) {
          case ADD_BIRD:
            return [
              ...state,
              {
                name: action.bird,
                views: 1
              }
            ];
          case INCREMENT_BIRD:
            const bird = state.find(b => action.bird === b.name);
            const birds = state.filter(b => action.bird !== b.name);
            return [
              ...birds,
              {
                ...bird,
                views: bird.views + 1
              }
            ];
          default:
            return state;
        }
      }
      

      Notice that you are not using the reducers to sort the data. Sorting could be considered a view concern since the view displays the information to a user. You could have one view that sorts by name and one view that sorts by view count, so it’s better to let individual components handle the sorting. Instead, keep reducers focused on updating the data, and the component focused on converting the data to a usable view for a user.

      This reducer is also imperfect since you could add birds with the same name. In a production app you would need to either validate before adding or give birds a unique id so that you could select the bird by id instead of name.

      Now you have two complete actions and a reducer. The final step is to export the reducer so that it can initialize the store. In the first step, you created the store by passing a function that returns an object. You will do the same thing in this case. The function will take the store and the action and then pass the specific slice of the store to the reducers along with the action. It would look something like this:

      export function birdApp(store={}, action) {
          return {
              birds: birds(store.birds, action)
          }
      }
      

      To simplify things, Redux has a helper function called combineReducers that combines the reducers for you.

      Inside of birds.js, import combineReducers from redux. Then call the function with birds and export the result:

      redux-tutorial/src/store/bird/birds.js

      import { combineReducers } from 'redux';
      const ADD_BIRD = 'ADD_BIRD';
      const INCREMENT_BIRD = 'INCREMENT_BIRD';
      
      export function addBird(bird) {
        return {
          type: ADD_BIRD,
          bird,
        }
      }
      
      export function incrementBird(bird) {
        return {
          type: INCREMENT_BIRD,
          bird
        }
      }
      
      const defaultBirds = [
        {
          name: 'robin',
          views: 1,
        }
      ];
      
      function birds(state=defaultBirds, action) {
        switch (action.type) {
          case ADD_BIRD:
            return [
              ...state,
              {
                name: action.bird,
                views: 1
              }
            ];
          case INCREMENT_BIRD:
            const bird = state.find(b => action.bird === b.name);
            const birds = state.filter(b => action.bird !== b.name);
            return [
              ...birds,
              {
                ...bird,
                views: bird.views + 1
              }
            ];
          default:
            return state;
        }
      }
      
      const birdApp = combineReducers({
        birds
      });
      
      export default birdApp;
      

      Save and close the file.

      Your actions and reducers are all set up. The final step is to initialize your store using the combined reducers instead of a placeholder function.

      Open src/index.js:

      Import the birdApp from birds.js. Then initialize the store using birdApp:

      redux-tutorial/src/index.js

      
      import React from 'react';
      import ReactDOM from 'react-dom';
      import './index.css';
      import App from './components/App/App';
      import * as serviceWorker from './serviceWorker';
      import { Provider } from 'react-redux'
      import { createStore } from 'redux'
      import birdApp from './store/birds/birds';
      
      const store = createStore(birdApp);
      
      ReactDOM.render(
        <React.StrictMode>
          <Provider store={store}>
            <App />
          </Provider>
        </React.StrictMode>,
        document.getElementById('root')
      );
      
      // If you want your app to work offline and load faster, you can change
      // unregister() to register() below. Note this comes with some pitfalls.
      // Learn more about service workers: https://bit.ly/CRA-PWA
      serviceWorker.unregister();
      

      Save and close the file. When you do the browser will refresh with your application:

      Bird watching app with form

      In this step you created actions and reducers. You learned how to create actions that return a type and how to build reducers that use the action to build and return a new state based on the action. Finally, you combined the reducers into a function that you used to initialize the store.

      Your Redux store is now all set up and ready for changes. In the next step you’ll dispatch actions from a component to update the data.

      Step 3 — Dispatching Changes in a Component

      In this step, you’ll import and call your actions from your component. You’ll use a method called dispatch to send the action and you’ll dispatch the actions inside of event handlers for the form and the button.

      By the end of this step, you’ll have a working application that combines a Redux store and your custom components. You’ll be able to update the Redux store in real time and will be able to display the information in your component as it changes.

      Now that you have working actions, you need to connect them to your events so that you can update the store. The method you will use is called dispatch and it sends a particular action to the Redux store. When Redux receives an action you have dispatched, it will pass the action to the reducers and they will update the data.

      Open App.js:

      • nano src/components/App/App.js

      Inside of App.js import the Hook useDispath from react-redux. Then call the function to create a new dispatch function:

      redux-tutorial/src/components/App/App.js

      import React from 'react';
      import { useDispatch, useSelector } from 'react-redux'
      import './App.css';
      
      function App() {
        ...
      }
      
      export default App;
      

      Next you’ll need to import your actions. Remember, actions are functions that return an object. The object is what you will ultimately pass into the dispatch function.

      Import incrementBird from the store. Then create an onClick event on the button. When the user clicks on the button, call incrementBird with bird.name and pass the result to dispatch. To make things more readable, call the incrementBird function inside of dispatch:

      redux-tutorial/src/components/App/App.js

      import React from 'react';
      import { useDispatch, useSelector } from 'react-redux'
      import { incrementBird } from '../../store/birds/birds';
      import './App.css';
      
      function App() {
        const birds = useSelector(state => state.birds);
        const dispatch = useDispatch();
      
        return (
          <div className="wrapper">
            <h1>Bird List</h1>
            <form>
              <label>
                <p>
                  Add Bird
                </p>
                <input type="text" />
              </label>
              <div>
                <button type="submit">Add</button>
              </div>
            </form>
            <ul>
              {birds.map(bird => (
                <li key={bird.name}>
                  <h3>{bird.name}</h3>
                  <div>
                    Views: {bird.views}
                    <button onClick={() => dispatch(incrementBird(bird.name))}><span role="img" aria-label="add">➕</span></button>
                  </div>
                </li>
              ))}
            </ul>
          </div>
        );
      }
      
      export default App;
      

      Save the file. When you do, you’ll be able to increment the robin count:

      Increment a bird

      Next, you need to dispatch the addBird action. This will take two steps: saving the input to an internal state and triggering the dispatch with onSubmit.

      Use the useState Hook to save the input value. Be sure to convert the input to a controlled component by setting the value on the input. Check out the tutorial How To Build Forms in React for a more in-depth look at controlled components.

      Make the following changes to your code:

      redux-tutorial/src/components/App/App.js

      import React, { useState } from 'react';
      import { useDispatch, useSelector } from 'react-redux'
      import { incrementBird } from '../../store/birds/birds';
      import './App.css';
      
      function App() {
        const [birdName, setBird] = useState('');
        const birds = useSelector(state => state.birds);
        const dispatch = useDispatch();
      
        return (
          <div className="wrapper">
            <h1>Bird List</h1>
            <form>
              <label>
                <p>
                  Add Bird
                </p>
                <input
                  type="text"
                  onChange={e => setBird(e.target.value)}
                  value={birdName}
                />
              </label>
              <div>
                <button type="submit">Add</button>
              </div>
            </form>
            <ul>
              ...
            </ul>
          </div>
        );
      }
      
      export default App;
      

      Next, import addBird from birds.js, then create a function called handleSubmit. Inside the handleSubmit function, prevent the page form submission with event.preventDefault, then dispatch the addBird action with the birdName as an argument. After dispatching the action, call setBird('') to clear the input. Finally, pass handleSubmit to the onSubmit event handler on the form:

      redux-tutorial/src/components/App/App.js

      import React, { useState } from 'react';
      import { useDispatch, useSelector } from 'react-redux'
      import { addBird, incrementBird } from '../../store/birds/birds';
      import './App.css';
      
      function App() {
        const [birdName, setBird] = useState('');
        const birds = useSelector(state => state.birds);
        const dispatch = useDispatch();
      
        const handleSubmit = event => {
          event.preventDefault();
          dispatch(addBird(birdName))
          setBird('');
        };
      
        return (
          <div className="wrapper">
            <h1>Bird List</h1>
            <form onSubmit={handleSubmit}>
              <label>
                <p>
                  Add Bird
                </p>
                <input
                  type="text"
                  onChange={e => setBird(e.target.value)}
                  value={birdName}
                />
              </label>
              <div>
                <button type="submit">Add</button>
              </div>
            </form>
            <ul>
              {birds.map(bird => (
                <li key={bird.name}>
                  <h3>{bird.name}</h3>
                  <div>
                    Views: {bird.views}
                    <button onClick={() => dispatch(incrementBird(bird.name))}><span role="img" aria-label="add">➕</span></button>
                  </div>
                </li>
              ))}
            </ul>
          </div>
        );
      }
      
      export default App;
      

      Save the file. When you do, the browser will reload and you’ll be able to add a bird:

      Save new bird

      You are now calling your actions and updating your birds list in the store. Notice that when your application refreshed you lost the previous information. The store is all contained in memory and so a page refresh will wipe the data.

      This list order will also change if you increment a bird higher in the list.

      Robin goes to the bottom on reorder

      As you saw in Step 2, your reducer is not concerned with sorting the data. To prevent an unexpected change in the components, you can sort the data in your component. Add a sort() function to the birds array. Remember that sorting will mutate the array and you never want to mutate the store. Be sure to create a new array by spreading the data before sorting:

      redux-tutorial/src/components/App/App.js

      import React, { useState } from 'react';
      import { useDispatch, useSelector } from 'react-redux'
      import { addBird, incrementBird } from '../../store/birds/birds';
      import './App.css';
      
      function App() {
        const [birdName, setBird] = useState('');
        const birds = [...useSelector(state => state.birds)].sort((a, b) => {
          return a.name.toLowerCase() > b.name.toLowerCase() ? 1 : -1;
        });
        const dispatch = useDispatch();
      
        const handleSubmit = event => {
          event.preventDefault();
          dispatch(addBird(birdName))
          setBird('');
        };
      
        return (
          <div className="wrapper">
            <h1>Bird List</h1>
            <form onSubmit={handleSubmit}>
              <label>
                <p>
                  Add Bird
                </p>
                <input
                  type="text"
                  onChange={e => setBird(e.target.value)}
                  value={birdName}
                />
              </label>
              <div>
                <button type="submit">Add</button>
              </div>
            </form>
            <ul>
              {birds.map(bird => (
                <li key={bird.name}>
                  <h3>{bird.name}</h3>
                  <div>
                    Views: {bird.views}
                    <button onClick={() => dispatch(incrementBird(bird.name))}><span role="img" aria-label="add">➕</span></button>
                  </div>
                </li>
              ))}
            </ul>
          </div>
        );
      }
      
      export default App;
      

      Save the file. When you do, the components will stay in alphabetical order as you increment birds.

      Cardinal stays on top

      It’s important to not try and do too much in your Redux store. Keep the reducers focused on maintaining up-to-date information then pull and manipulate the data for your users inside the component.

      Note: In this tutorial, notice that there is a fair amount of code for each action and reducer. Fortunately, there is an officially supported project called Redux Toolkit that can help you reduce the amount of boilerplate code. The Redux Toolkit provides an opinionated set of utilities to quickly create actions and reducers, and will also let you create and configure your store with less code.

      In this step, you dispatched your actions from a component. You learned how to call actions and how to send the result to a dispatch function, and you connected them to event handlers on your components to create a fully interactive store. Finally, you learned how to maintain a consistent user experience by sorting the data without directly mutating the store.

      Conclusion

      Redux is a popular single store. It can be advantageous when working with components that need a common source of information. However, it is not always the right choice in all projects. Smaller projects or projects with isolated components will be able to use built-in state management and context. But as your applications grow in complexity, you may find that central storage is critical to maintaining data integrity. In such cases, Redux is an excellent tool to create a single unified data store that you can use across your components with minimal effort.

      If you would like to read more React tutorials, check out our React Topic page, or return to the How To Code in React.js series page.



      Source link