Saltar al contenido

¿Cómo combinar los reductores en redux utilizando combineReducer functionDec, 28thIn este tutorial, vamos a aprender acerca de cómo combinar la …

marzo 13, 2020

 

En este tutorial, vamos a aprender acerca de cómo combinar las múltiples funciones de reductor en redux con la ayuda de un ejemplo.

Si usted no sabe acerca redux continuación, echa un vistazo a mis anteriores tutoriales

Como nuestra aplicación crece nuestra función reductor es cada vez más compleja por lo que podemos dividir la función única en un reductor de múltiples funciones independientes que gestionan su propio estado.

consideramos que tenemos dos reductores en nuestra aplicación para reaccionar.

const counterReducer = (state={num:0},action)=>{

switch (action.type){

case "INCREMENT":
return { num : state.num+1 }

case "DECREMENT":
return {num: state.num-1}

default:
return state
}

}

export default counterReducer

En el código anterior, hemos creado nuestra primera función counterReducer.

Ahora, vamos a definir la función reductor segundo .

const namesReducer = (state = { allNames: [] }, action) => {
switch (action.type) {

case "ALLNAMES":
return { allNames: state.allNames.concat(action.name) }

default:
return state
}

}

export default namesReducer

continuación, tenemos que importar estas dos funciones reductor dentro del archivo index.js.

combineReducers ejemplo

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore, combineReducers } from 'redux'
import {Provider} from 'react-redux'
import counterReducer from './counterReducer';
import namesReducer from '.
amesReducer';

// combining two reducers into a single reducer
const reducer = combineReducers({
counter: counterReducer,
name: namesReducer
})

const store = createStore(reducer)

ReactDOM.render(,
document.getElementById('root'))

En lo anterior, hemos importado dos funciones reductores que son counterReducer y namesReducerthen que importan una función combineReducer de la biblioteca ‘redux’. función

combineReducer toma múltiples funciones reductor como un argumento y se gira hacia abajo en una sola función reductora.

Estamos namespacing las funciones reductor como contador para el counterReducer y el nombre del namesReducer. Véase la

Let cómo podemos acceder al estado de los componentes.

import React from 'react'
import {connect} from 'react-redux'

class App extends React.Component{

render(){
return (

{this.props.num}

)
}

}

const mapStatetoProps = (state)=>{
return {
num : state.counter.num
}
}

export default connect(mapStatetoProps)(App)

En el componente anterior, se utilizó state.counter.num porque espacio de nombres en la función combineReducer.

Si abre sus herramientas redux dev se puede ver todo el estado de la aplicación en un solo objeto con namespacing.