Question

在关于Reducers的Redux basics tutorial部分中，我不太清楚以下语法如何推断应用状态的哪个子集传递给combineReducers调用中引用的每个reducer。它是否与reducer名称上的状态成员名称完全匹配？

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

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

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

Answer 2

您发布的代码只是2个缩减器，它们的实际应用程序无法在那里看到。

考虑以下代码：

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

然后推断应用程序的下一个状态并将其作为全新状态返回。状态由调度员传递给减速器。

注意：上面的所有代码都取自OP发布的相同教程。

Redux - combineReducers如何知道应用程序状态的哪个子集传递给reducer

2 个答案: