Please enable JavaScript.

Coggle requires JavaScript to display documents.

Step-by-Step: React-Redux (Config: (src/index.js (import ({ createStore }…

- - - - { createStore } from 'redux'
      - { Provider } from 'react-redux'
      - reducers from './main/reducers.js :red_flag:
    - - dentro de ReactDom.render( <Provider store={ store }> <App /> </Provider> )
      - const store = createStore( reducers )
  - - - imports
        
        { combineReducers } from 'redux'
        
        nomeDoComponenteReducer from '../nomeDoCompoenete/nomeDocomponenteReducer.js' :fire:
      - code
        
        const rootReducers ( será o responsavel por concatenar todos os Reducers da Aplicação )
        
        = combineReducers({ nomeEstadoDoComponente :!: : funcaoRetornadaPeloReducersAposOAction })
        
        export rootReducers
        
        EX:
        
        = combineReducers({ todo : nomeDoComponenteReducer })
  - - - npm install --save-dev redux-promise@0.5.3
        
        src/index.js
        
        imports
        
        { applyMiddleware, createStore } from 'redux'
        
        promise from 'redux-promise'
        
        code
        
        const store = applyMiddleware(promise)(createStore)(reducers)
- - - - { connect } from 'react-redux'
    - - const mapStateToProps = state => ( { attrParaSerAddNoPropsDoComponente : state.nomeEstadoDoComponente :!: } )
      - EX:
        
        const mapStateToProps = state => ( { attrParaSerAddNoPropsDoComponente : state.todo } )
      - export connect( mapStateToProps)(nomeDoComponente) :star:
      - responder Ações Usuarios:
        
        ActionCreators
        
        no Componente:
        
        imports
        
        { bindActionCreators } from ''redux'
        
        nomeDaFunçãoDeManipularAlteraçãoNoCompoenente from '../pasta/nomeDoComponenteActions.js
        
        code
        
        const mapDispatchToProps = dispatch => bindActionCreators ( { nomeDaFunçãoDeManipularAlteraçãoNoCompoenente :warning: }, dispatch ) ---> funcao é adicionada no Props do Componente
        
        usa a funcção: -->
        this.props.nomeDaFunçãoDeManipularAlteraçãoNoCompoenente:warning: dentro do COMPONENTE
        
        exports
        
        export connect( mapStateToProps, mapDispatchToProps)(nomeDoComponente) :star:
        
        cria o FILE nomeComponenteActions.js
        
        export const nomeDaFunçãoDeManipularAlteraçãoNoCompoenente :warning: = (event) => ( { type: 'NOME_DA_ACAO', payload: event } )
        
        cria o FILE nomeComponenteReducer.js :fire:
        
        const INITIAL_STATE = { attrsDoEstadoDoComponenete }
        
        ex:
        
        const INITIAL_STATE = { description: 'blablabal', list: [ { _id: 1 }, { _id: 2 } ] }
        
        const nomeFuncaoReducer = (state = INITIAL_STATE, action) => {
        switch(action.type) {
        case 'NOME_DA_ACAO' :
        return { ...state, algumAtributoDoEstadoDoComponent: action.payload }
        default:
        return state