redux/react 应用程序中的状态有一个带有减速器名称的属性

我正在使用 Redux 和 React 创建一个应用程序。我遇到了一个问题，我无法将状态映射到组件属性，因为状态有一个与我使用的减速器名称匹配的属性。

根减速器是用以下命令创建的combineReducers method

const rootReducer = combineReducers({
  appReducer
});

初始状态是

const initialState = {
  sources: [], 
  left: {}, 
  right: {},
  diff: {} 
}

然而在组件函数中mapStateToProps:

function mapStateToProps(state) {
  return {
    sources: state.sources
  }
}

The state.sources is undefined因为的价值state参数是

{
  appReducer: {
    sources: [], 
    left: {}, 
    right: {}, 
    diff: {}
  }
}

这是redux的一个特性吗？所以当我使用更多的减速器时，它们都会添加新的属性state多变的？或者我这边有什么问题（我从来没有在 redux 教程中注意到这种行为）。

Thanks

如果您只有一个减速器，则不需要combineReducers()。直接使用即可：

const initialState = {
  sources: [],
  left: {},
  right: {}
}
function app(state = initialState, action) {
  switch (action.type) {
  case 'ADD_SOURCE':
    return Object.assign({}, state, {
      sources: [...state.sources, action.newSource]
    })
  case 'ADD_SOURCE_TO_LEFT':
    return Object.assign({}, state, {
      left: Object.assign({}, state.left, {
        [action.sourceId]: true
      })
    })
  case 'ADD_SOURCE_TO_RIGHT':
    return Object.assign({}, state, {
      right: Object.assign({}, state.right, {
        [action.sourceId]: true
      })
    })
  default:
    return state
  }
}

现在您可以使用该减速器创建一个商店：

import { createStore } from 'redux'
const store = createStore(app)

并将一个组件连接到它：

const mapStateToProps = (state) => ({
  sources: state.sources
})

然而，你的减速器很难阅读，因为它会同时更新许多不同的东西。现在，this是时候你想把它分成几个独立的减速器：

function sources(state = [], action) {
  switch (action.type) {
  case 'ADD_SOURCE':
    return [...state.sources, action.newSource]
  default:
    return state
  }
}

function left(state = {}, action) {
  switch (action.type) {
  case 'ADD_SOURCE_TO_LEFT':
    return Object.assign({}, state, {
      [action.sourceId]: true
    })
  default:
    return state
  }    
}

function right(state = {}, action) {
  switch (action.type) {
  case 'ADD_SOURCE_TO_RIGHT':
    return Object.assign({}, state, {
      [action.sourceId]: true
    })
  default:
    return state
  }    
}

function app(state = {}, action) {
  return {
    sources: sources(state.sources, action),
    left: left(state.left, action),
    right: right(state.right, action),
  }
}

这更容易维护和理解，也使得独立更改和测试减速器变得更容易。

最后，作为最后一步，我们可以使用combineReducers()生成根app减速器而不是手写：

// function app(state = {}, action) {
//   return {
//     sources: sources(state.sources, action),
//     left: left(state.left, action),
//     right: right(state.right, action),
//   }
// }

import { combineReducers } from 'redux'
const app = combineReducers({
  sources,
  left,
  right
})

使用起来并没有太大的好处combineReducers()而不是手动编写根减速器，只不过它的效率稍高一些，并且可能会减少一些拼写错误。此外，您可以在应用程序中多次应用此模式：以嵌套方式将不相关的减速器多次组合到单个减速器中是可以的。

所有这些重构都不会对组件产生影响。

我建议你看我的Redux 上的免费 Egghead 课程 https://egghead.io/series/getting-started-with-redux其中涵盖了这种模式减速剂组合物并展示如何combineReducers()已实施。