Redux - w jaki sposób CombineReducers wie, który podzbiór stanu aplikacji przechodzi do reduktora

Question

W sekcji Redux basics tutorial na temat Reduktorów nie mogę w pełni zrozumieć, w jaki sposób następująca składnia wnioskuje, który podzestaw stanu aplikacji należy przekazać do każdego reduktora wymienionego w wezwanie do łączeniaReducers. Czy jest to tylko dopasowanie nazwy państwa na nazwę reduktora?

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

Odnośnie konkretnego pytania o to, jak działa to z funkcją combineReducers, po prostu sprawdź kod źródłowy. Możesz zobaczyć w combineReducers.js in the redux repo, że gdy czynność przechodzi przez każdy reduktor, który został połączony, każdy poszczególny reduktor przechodzi przez gałąź stanu, która pasuje do odpowiadającego jej klucza w obiekcie, który przekazałeś do combineReducers.

Tak więc w twoim przykładzie zarówno reduktory visibilityFilter, jak i todos mają klucze o tej samej nazwie (z powodu używanego ES6 object property shorthand). A te klucze są tym, które są używane do przekazywania określonych gałęzi stanu do każdego odpowiedniego reduktora.

Answer 2

Kod, który wysłałeś, to po prostu 2 reduktory, których nie można tam zobaczyć.

Weź pod perspektywy następujący kod:

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 

Gdy przycisk komponenty kliknięciu, to odpala akcję (addTodo):

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

który następnie jest przetwarzany przez jednego z reduktorów Ci napisali powyżej:

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 
    } 
} 

które następnie dedukuje NEX t stan aplikacji i zwraca jako nowy stan. Państwo jest przekazywane do reduktora przez dyspozytora.

Uwaga: Powyższy kod został zaczerpnięty z tego samego podręcznika OP.