Redux - Create forms using Redux And React

Related tags

Redux Tools redux
Overview

Exercício de fixação

Vamos criar formulários utilizando Redux! \o/

Antes de iniciar

Crie um fork desse projeto e para isso siga esse tutorial de como realizar um fork.

Após feito o fork, clone o repositório criado para o seu computador.

Rode o npm install.

Vá para a branch master do seu projeto e execute o comando:

git branch ou git branch -a

Verifique se a a branch master apareceu:

  • O exercício deverá ser feito na branch master.

Observe o que deve ser feito nas instruções.

Após a solução dos exercícios, abra um PR no seu repositório forkado e, se quiser, mergeie para a master, sinta-se a vontade!

Atenção! Quando for criar o PR você irá se deparar com essa tela:

exemple-pr

É necessário realizar uma mudança. Clique no base repository como na imagem abaixo:

exemple-pr

Mude para o seu repositório. Seu nome estará na frente do nome dele, por exemplo: antonio/forms-redux. Depois desse passo a página deve ficar assim:

exemple-pr

Agora basta criar o PULL REQUEST clicando no botão Create Pull Request.

Para cada PR realize esse processo.


COMEÇANDO O EXERCÍCIO

Atenção! A branch master possui a estrutura do formulário pronta, necessitando apenas da implementação do Redux. Se preferirem criar os formulários desde o início, basta acessar a branch exercise-react-redux e seguir as instruções descritas no README.

Vocês implementarão o Redux para dois formulários, cada um em uma etapa, um para dados pessoais e outro para dados profissionais e exibí-los na tela.

Lembrando que os formulários já estão criados, não é necessário criar novos arquivos além dos propostos para a execução do exercício.

forms-redux

Para isso, é preciso salvar as informações de cada formulário no gerenciador de estados e, por fim, numa outra página, acessar esses dados para que sejam renderizados.

Você vai precisar de:

  • Gerenciador de estados (Reeeedux), para salvar as informações na store e também para acessá-las.

Então, mãos ao código!!

1 - Implemente o Redux:

  • Dentro de uma pasta "redux", crie as pastas "actions", "reducers" e "store".
  • Dentro de "actions" crie um arquivo chamado action.js.
  • Dentro de "reducers" crie um arquivo chamado reducer.js e, caso necessário, um arquivo index.js para usar o combineReducers.
  • Dentro de "store" crie um arquivo chamado store.js.
  • Implemente o reducer.
  • Implemente a store.
  • Implemente as actions.

Dicas:

  • De início, você pode implementar seu reducer apenas com o valor default.
  • O composeWithDevTools pode te ajudar.

Lembre-se que, ao montar a estrutura do Redux, é preciso importar o Provider, que recebe a store, no index.js.

Dica: Caso esteja tendo dificuldades para montar a estrutura do Redux, você pode consultar o passo a passo que está nesse link!

Lembre-se de fazer as importações corretas para o bom funcionamento da sua aplicação.

2 - Salve as informações das páginas PersonalForm e ProfessionalForm na store.

Dica: Lembre-se que o mapStateToProps lê as informações da store e o mapDispatchToProps envia as informações para a store.

3 - Renderize, em FormDataDisplay, todas as informações que estão salvas na store.


You might also like...
Shop Cart Page Built Using React And Redux
Shop Cart Page Built Using React And Redux

Getting Started with react-redux-jest-shop Shop cart page with use: React,redux,redux-thunk, API,JEST, LTR Steps for run git clone or download react-r

Redux Implementation using ReactJS and JSON placeholder API

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

A lightweight state management library for react inspired by redux and react-redux

A lightweight state management library for react inspired by redux and react-redux

A simple app for study react with redux, redux saga and typescript.

React com Redux, Redux-Saga e TypeScript. 🚀 Uma aplicação simple para entender o funcionamento do Redux e a melhor maneira de utiliza-lo junto com o

Watchlist Movie App Using React Hooks With Redux

MovieRedux Watchlist Movie App Using React Hooks With Redux Technology Stack: Re

RxJS middleware for action side effects in Redux using
RxJS middleware for action side effects in Redux using "Epics"

RxJS-based middleware for Redux. Compose and cancel async actions to create side effects and more. https://redux-observable.js.org Install This has pe

Toolkit for implementing clean architecture using Redux
Toolkit for implementing clean architecture using Redux

📐 Toolkit for implementing clean architecture using Redux 📐 🔩 Focuses on achi

A chart monitor for Redux DevTools https://www.npmjs.com/package/redux-devtools-chart-monitor
A chart monitor for Redux DevTools https://www.npmjs.com/package/redux-devtools-chart-monitor

Redux DevTools Chart Monitor This package was merged into redux-devtools monorepo. Please refer to that repository for the latest updates, issues and

An i18n solution for React/Redux and React Native projects
An i18n solution for React/Redux and React Native projects

redux-react-i18n An i18n solution with plural forms support for Redux/React Workers of all countries, unite! Supported languages list with expected co

Owner
Márcio Júnior
Márcio Júnior
redux-immutable is used to create an equivalent function of Redux combineReducers that works with Immutable.js state.

redux-immutable redux-immutable is used to create an equivalent function of Redux combineReducers that works with Immutable.js state. When Redux creat

Gajus Kuizinas 1.9k Sep 25, 2022
Skeleton React App configured with Redux store along with redux-thunk, redux persist and form validation using formik and yup

Getting Started with React-Redux App Some Configrations Needed You guys need to modify the baseUrl (path to your server) in the server.js file that is

Usama Sarfraz 11 Jul 10, 2022
This command line helps you create components, pages and even redux implementation for your react project

react-help-create This command line helps you create components, pages and even redux implementation for your react project. How to install it? To ins

Omar 23 Sep 15, 2022
Financial Metrics - about building a mobile web application to check a list of metrics that I create making use of React and Redux

Financial Metrics is about building a mobile web application to check a list of metrics (numeric values) that I create making use of React and Redux

Amrendra K 9 Jun 4, 2022
Redux Tutorial - share my experience regarding redux, react-redux and redux-toolkit

Redux Tutorial 1. Introduction to Redux 1.1 What is Redux & why Redux? A small JS Library for managing medium/large amount of states globally in your

Anisul Islam 29 Sep 29, 2022
A quick start Redux + TypeScript Create React App template

A quick start Redux + TypeScript Create React App template An opinionated quick

null 0 Dec 24, 2021
Helper to create less verbose action types for Redux

Action Typer Helper to create slightly less verbose redux action types. Uses ES6 Proxies! Highly Performant: Proxy is only run once at startup. Includ

Alister Norris 57 Nov 21, 2021
Create the next immutable state by mutating the current one

Immer Create the next immutable state tree by simply modifying the current tree Winner of the "Breakthrough of the year" React open source award and "

immer 23.7k Sep 30, 2022
A Higher Order Component using react-redux to keep form state in a Redux store

redux-form You build great forms, but do you know HOW users use your forms? Find out with Form Nerd! Professional analytics from the creator of Redux

Redux Form 12.6k Sep 22, 2022
Single page application for tracking cryptocurrencies. Includes sorting, animations, graphs and more. Made using React & Redux.

Crypto Tracker A single page application meant to keep track of the most popular crypto currencies status. The user can sort the coins by highest gain

Robert Baiesita 16 Oct 24, 2021