Redux - 组合减速器如何知道应用状态的哪个子组通过减速器

在减速器的Redux basics tutorial部分，我无法完全理解下面的语法是如何推导应用状态的哪个子集传递给每个引用的reducer调用combineReducers。它是否与Reducer名称上的状态成员名称完全匹配？Redux - 组合减速器如何知道应用状态的哪个子组通过减速器

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

来源

2016-04-27 hally9k

该代码没有。你必须在组件本身内部指定。 – Derek

正确。我想如果它不使用新的ES6语法，它会更明显。联合收割机（{todos：myTodoReducer }） – ken4z

关于如何使用combineReducers函数的具体问题，请查看源代码。您可以在combineReducers.js in the redux repo中看到，随着动作遍历每个已组合的缩减器，每个单独的缩减器都会通过与您传递到combineReducers的对象中其相应键相匹配的状态分支。

因此，在您的示例中，visibilityFilter和todos减速器都具有相同名称的键（因为您正在使用ES6 object property shorthand）。这些键是用于将特定分支状态传递给各个缩减器的键。

来源

2016-05-03 10:30:41

您发布的代码只是2个reducer，它们的实际应用程序在那里是看不到的。

考虑到透视以下代码：

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

当点击组件按钮，它触发关闭一个动作（addTodo）：

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

，然后通过所述减速器的一个处理您上面贴出的：

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

然后推导出nex应用程序的状态并将其作为全新的状态返回。状态由调度员传递给reducer。

注意：以上所有代码都来自OP张贴的相同教程。

来源

2016-04-27 19:31:53 Derek

Redux - 组合减速器如何知道应用状态的哪个子组通过减速器

回答

相关问题