edvaldojose/checklist-react-redux

Guia para a configuração inicial do react-redux.

Checklist do react-redux

Antes de começar

• pensar como será o formato do seu estado global
• pensar quais actions serão necessárias na sua aplicação

Instalação

• npx create-react-app my-app-redux;
• npm install --save redux react-redux;
• npm install.
• npm install redux-thunk (opcional)

Criar dentro do diretório src:

• diretório actions;
• diretório reducers;
• diretório store.

Criar dentro do diretório actions:

• arquivo index.js.

Criar dentro do diretório reducers:

• arquivo index.js.

Criar dentro do diretório store:

• arquivo index.js.

No arquivo App.js:

• definir o Provider, <Provider store={ store }>, para fornecer os estados à todos os componentes encapsulados em <App />.

No arquivo store/index.js:

• importar o rootReducer e criar a store
• configurar o Redux DevTools
• importar composeWithDevTools()(É importado da lib 'redux-devtools-extension')

Na pasta reducers:

• criar os reducers necessários
• configurar os exports do arquivo index.js

Na pasta actions:

• criar os actionTypes, por exemplo: const ADD_TO_CART = 'ADD_TO_CART';
• criar os actions creators necessários

Nos componentes:

• criar a função mapStateToProps(state) => ({}) (leitura de dados)
• criar a função mapDispatchToProps(dispatch) => ({ key: (...paramAct) => dispatch(action(...paramAct)) }) (escrita de dados)
• fazer o connect(mapStateToProps, mapDispatchToProps)(component) (importado da lib 'react-redux')