redux 状态树上的重复项

Question

我正在尝试使用切换按钮更新我的 Redux 状态。我的 LB reducer 由 2 个 reducer 组成，一个名为 listItems 的数组用于显示唯一数量的值，以及 filterBarState 用作对当前过滤器的引用。

虽然我的初始状态是正确的，但我的减速器将切换动作置于 filterBarState 之外

下面是我的LB对象reducer

export default (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case EVENT_FILTER_PRESSED:
      return {
         // Reducer composition 
        filterBarState: eventFilter(state.filterBarState, action),
        listItems: eventItems(state.listItems, action)
      };
    case MALE_FILTER_PRESSED:
      // console.log('isMaleFilterOn:', action.isMaleFilterOn)
      return { ...state, isMaleFilterOn: action.isMaleFilterOn };
    case FEMALE_FILTER_PRESSED:
      // console.log('isFemaleFilterOn:', action.isFemaleFilterOn)
      return { ...state, isFemaleFilterOn: action.isFemaleFilterOn };

在我的 React Native 容器组件中，我在 mapStateToProps 中尝试了一些（可疑的）ES6 解构，如果我不包括，整个 filterBarState returns undefined

const mapStateToProps = ({ LB }) => {

  const { filterBarState: { isMaleFilterOn, isFemaleFilterOn, currentSelectedEvent, currentSelectedRow }, listItems, isCurrentlySelected } = LB;

  return { isMaleFilterOn, isFemaleFilterOn, currentSelectedEvent, currentSelectedRow, listItems, isCurrentlySelected };

任何关于修复的提示/建议将不胜感激！

Answer 1

根据 EVENT_FILTER_PRESSED 处理程序，您似乎没有在正确的级别更新 isMaleFilterOn 和 isFemaleFilterOn。试试这个：

export default (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case EVENT_FILTER_PRESSED:
      return {
         // Reducer composition 
        filterBarState: eventFilter(state.filterBarState, action),
        listItems: eventItems(state.listItems, action)
      };
    case MALE_FILTER_PRESSED:
      // console.log('isMaleFilterOn:', action.isMaleFilterOn)
      return { ...state, filterBarState: { ...state.filterBarState, isMaleFilterOn: action.isMaleFilterOn } };
    case FEMALE_FILTER_PRESSED:
      // console.log('isFemaleFilterOn:', action.isFemaleFilterOn)
      return { ...state, filterBarState: { ...state.filterBarState, isFemaleFilterOn: action.isFemaleFilterOn } };
}

redux 状态树上的重复项

Duplicate items on redux state tree

switch-statement

ecmascript-6

react-native

redux

react-redux