Redux - uygulama durumlarının hangi alt kümesinin indirgeyiciye iletileceğini bilerek nasıl birleştirilir

Question

Redüktörler hakkındaki Redux basics tutorial bölümünde, aşağıdaki sözdiziminin, başvuruda belirtilen her bir redükleyiciye hangi uygulama alt kümesinin geçeceğini anlayamıyorum. Reducers birleştirmek için çağrı. Devlet üye ismini indirgeyici adıyla tamamen uyuşuyor mu?

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

Bunun, combineReducers işleviyle nasıl çalıştığına ilişkin özel soruna ilişkin olarak, kaynak koduna bakın. combineReducers.js in the redux repo numaralı belgede, eylemin birleştirilen her redüktörden geçtiği gibi, her bir redüktörün, combineReducers'a ilettiğiniz nesneye karşılık gelen anahtarı ile eşleşen durum dalını geçtiğini görebilirsiniz.

Örneğinizde, hem visibilityFilter hem de todos redüktörlerde aynı ada sahip anahtarlar var (kullandığınız ES6 object property shorthand nedeniyle). Ve bu anahtarlar, her bir ilgili redüktöre belirli devlet dallarını geçmek için kullanılan anahtarlardır.

Answer 2

Gönderdiğiniz kod sadece 2 redükleyicidir, gerçek uygulamaları orada görünemez.

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

sonra düşürücüler biri tarafından işlenir:

bileşenleri düğmesi tıklandığında

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 

, bu bir eylem (addTodo) ateşler:

perspektiften aşağıdaki kodu alın Yukarıda belirtilenler:

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

Daha sonra nex çıkarımı t uygulama durumu ve yepyeni devlet olarak döndürür. Devlet dağıtıcı tarafından redüktöre geçirilir.

Not: Yukarıdaki tüm kodlar, kaydedilen OP'in aynı dersinden alınmıştır.