redux-steps.md

Redux-Steps

1º => Criar uma pasta 'redux' com 3 pastas dentro: 'action', 'reducers', 'store';

2º => Criar um arquivo .js dentro da pasta 'store';
Importar createStore e compose do 'redux';
Importar do arquivo 'index.js' que será criado da pasta 'reducers' o 'rootReducer';
Criar uma const 'extension' com o código padrão de conexão c/ redux-dev-tools do chrome;
Criar uma const 'store' com o createStore e passando pra ele como parametros ('rootReducer','compose'), 'compose' que deve receber a const ('extension') como parametro;

import { createStore, compose } from 'redux';
import rootReducer from '../reducers';

const extension = window.devToolsExtension() || ((f) => f);

export const store = createStore(rootReducer, compose(extension));

3º => Criar na pasta 'reducers' um arquivo 'index.js';
Importar 'combineReducers' do 'redux';
Importar os 'reducers' criados nos outros arquivos .js existentes na pasta 'reducers';
Criar uma const 'rootReducer' com o 'combineReducers' que recebe por parametro um objeto com todos os reducers importados;

import { combineReducers } from 'redux';
import nomeDoReducerCriado1 from './arquivoOndeEstaOReducer1';
import nomeDoReducerCriado2 from './arquivoOndeEstaOReducer1';

export const rootReducer = combineReducers(
  { nomeDoReducerCriado1, nomeDoReducerCriado2 }
);

4º => Criar uma const com o mesmo nome que a string que vai nela;
Criar uma função que recebe por parametro ('payload') retorna um objeto com o 'type' e o 'payload' como chaves;

export const NOME_DE_UM_ACTION_TYPE = 'NOME_DE_UM_ACTION_TYPE';

export const funçãoQueModificaUmEstadoNoReducerIndicadoPeloType = (payload) => (
  { type: NOME_DE_UM_ACTION_TYPE, payload }
);

5º => Criar na pasta 'reducers' um arquivo 'reducerName.js' pra cada reducer que desejar criar;
Criar um 'INITIAL_STATE' que é um objeto igual um 'this.state' do React para setar os estados iniciais daquele reducer;
Criar uma função 'reducerName' que recebe ('state = INITIAL_STATE' e 'action') como parametros. Essa função tem um 'switch' no corpo que verifica '(action.type)', tendo um 'case' para cada 'ACTION_TYPE' criada em uma função 'ACTION_CREATOR'. Cada case retorna a modificação no estado que aquela ACTION_CREATOR deve realizar através do ('payload');

const INITIAL_STATE = {
  algumEstadoInicial01: '',
  algumEstadoInicial02: '',
};

export const reducerName = (state = INITIAL_STATE, action) => {
  switch (action.type) {
  case NOME_DE_UM_ACTION_TYPE:
    return {
      ...state,
      algumEstadoInicialQueSeráMudadoPorEssaAction: action.payload,
    };
  case NOME_DE_OUTRO_ACTION_TYPE:
    return {
      ...state,
      algumEstadoInicialQueSeráMudadoPorEssaAction: action.payload,
    };
  default:
    return state;
  }
};

6º =>

import React from 'react';
import { connect } from 'react-redux';
import { setPersonalInput } from '../redux/actions/action';

class Component extends React.Component {
  constructor() {
    super();
    this.state = {
      key: value,
    };
  }
  render() {
    return (<div>xablau</div>);
  }
}

const mapDispatchToProps = (dispatch) => (
  { dispatchSetValue: (componentState) => dispatch(setPersonalInput(componentState)) }
);

const mapStateToProps = ({ reducer }) => (
  { algumaChaveDeEstado: reducer.algumaChaveDeEstado }
);

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