Redux: in che modo CombinedReducers conosce quale sottoinsieme dello stato dell'app da passare al riduttore

Question

Nella sezione Redux basics tutorial su Riduttori, non riesco a capire come la seguente sintassi deduca quale sottoinsieme dello stato dell'app passare a ciascun riduttore a cui fa riferimento la chiamata per combinare i Reducer. È puramente corrispondente al nome del membro di stato sul nome del riduttore?

import { combineReducers } from 'redux' 
import { ADD_TODO, COMPLETE_TODO, SET_VISIBILITY_FILTER, VisibilityFilters } from './actions' 
const { SHOW_ALL } = VisibilityFilters 

function visibilityFilter(state = SHOW_ALL, action) { 
    switch (action.type) { 
    case SET_VISIBILITY_FILTER: 
     return action.filter 
    default: 
     return state 
    } 
} 

function todos(state = [], action) { 
    switch (action.type) { 
    case ADD_TODO: 
     return [ 
     ...state, 
     { 
      text: action.text, 
      completed: false 
     } 
     ] 
    case COMPLETE_TODO: 
     return state.map((todo, index) => { 
     if (index === action.index) { 
      return Object.assign({}, todo, { 
      completed: true 
      }) 
     } 
     return todo 
     }) 
    default: 
     return state 
    } 
} 

const todoApp = combineReducers({ 
    visibilityFilter, 
    todos 
}) 

export default todoApp 

Answer 1

Per quanto riguarda la tua domanda specifica su come funziona con la funzione combineReducers, basta controllare il codice sorgente. È possibile vedere in combineReducers.js in the redux repo che quando l'azione passa attraverso ogni riduttore che è stato combinato, ogni singolo riduttore ottiene il ramo di stato corrispondente alla chiave corrispondente nell'oggetto che si passa a combineReducers.

Quindi nel vostro esempio, sia i riduttori visibilityFilter e todos hanno le chiavi con lo stesso nome (a causa dello ES6 object property shorthand che state utilizzando). E quelle chiavi sono quelle che sono usate per passare gli specifici rami di stato a ciascun rispettivo riduttore.

Answer 2

Il codice che hai postato è semplicemente 2 riduttori, la loro effettiva applicazione non può essere vista lì.

prendere in prospettiva il seguente codice:

import React from 'react' 
import { connect } from 'react-redux' 
import { addTodo } from '../actions' 

let AddTodo = ({ dispatch }) => { 
    let input 

    return (
    <div> 
     <input ref={node => { 
     input = node 
     }} /> 
     <button onClick={() => { 
     dispatch(addTodo(input.value)) 
     input.value = '' 
     }}> 
     Add Todo 
     </button> 
    </div> 
) 
} 
AddTodo = connect()(AddTodo) 

export default AddTodo 

Quando il pulsante componenti viene cliccato, si spara un'azione (addTodo):

const addTodo = (text) => { 
    return { 
    type: 'ADD_TODO', 
    id: nextTodoId++, 
    text 
    } 
} 

che viene poi elaborato da uno dei riduttori hai postato sopra:

const todo = (state, action) => { 
    switch (action.type) { 
    case 'ADD_TODO': 
     return { 
     id: action.id, 
     text: action.text, 
     completed: false 
     } 
    case 'TOGGLE_TODO': 
     if (state.id !== action.id) { 
     return state 
     } 

     return Object.assign({}, state, { 
     completed: !state.completed 
     }) 

    default: 
     return state 
    } 
} 

Che poi deduce il nex t stato dell'applicazione e lo restituisce come nuovo stato. Lo stato è passato al riduttore dal dispatcher.

Nota: tutto il codice sopra è stato preso dallo stesso tutorial OP pubblicato.