Tutorial react-redux

React Redux é uma biblioteca que fornece ligações React para Redux.

Os componentes React cientes da loja Redux são chamados de “Containers”, “Smart Components” ou “Higher Order Component” (HOC). Tais componentes, para usar o Redux, precisam:

  • Inscreva-se na loja para obter atualizações da loja Redux
  • Ações de despacho

Fazer isso manualmente implicaria usar store.subscribe e store.dispatch(action) em containers React.

O React Redux simplifica a ligação entre a loja do Redux e um componente de contêiner do React por meio da função connect, que mapeia as propriedades do estado do Redux e os criadores de ação para as props do componente.

connect é uma função que cria um componente de ordem superior. Connect aceita 3 funções (mapStateToProps, mapDispatchToProps, mergeProps) e retorna um componente container, que envolve o componente original para torná-lo um componente “conectado”:

import { connect } from 'react-redux';

const Customers = { ... };
const mapStateToProps = (state) => { ... }
const mapDispatchToProps = (dispatch) => { ... }

export default connect(mapStateToProps, mapDispatchToProps)(Customers);

Consulte a seção de exemplos para obter um exemplo completo.

Como todos os componentes do container precisam acessar o repositório do Redux, a maneira recomendada é usar um componente especial <Provider> do React Redux, que passa o repositório para todos os componentes filhos (internamente usando o contexto do React).

Documentação oficial: http://redux.js.org/docs/basics/UsageWithReact.html

Repositório do GitHub: https://github.com/reactjs/react-redux

Começando com o react-redux →