Question

我想在数组状态内保存对象数据。但是，当我尝试在化简器中调用动作时，当我尝试对它进行console.log（）时，INITIAL_STATE.highlightedVerse始终为 undefined 。它应该是一个空数组，而不是未定义。

这些是我在package.json中使用的依赖项世博v32.0.0， React v16.5.0， Redux v4.0.1， React Redux v5.1.1， Redux Persist v.5.10.0

这些是我编写的代码：

import {
  ADD_BIBLE_VERSE_HIGHLIGHT,
  REMOVE_BIBLE_VERSE_HIGHLIGHT,
} from 'ndc-ministry/redux/actions/types'

const INITIAL_STATE = {
  highlightedVerse: [],
}

const reducer = (state = INITIAL_STATE, action) => {

  switch (action.type) {
    case ADD_BIBLE_VERSE_HIGHLIGHT:
      const currentHighlightedVerse = state.highlightedVerse
      if(currentHighlightedVerse.length > 0){
        currentHighlightedVerse.forEach(obj => {
          if(action.payload.bookIndex == obj.bookIndex 
            && action.payload.chapterIndex == obj.chapterIndex 
            && action.payload.verseIndex == obj.verseIndex
          ) {
            return {...state}
          }
        })
      }

      return {
        ...state,
        highlightedVerse: [...state.highlightedVerse, action.payload]
      }


    case REMOVE_BIBLE_VERSE_HIGHLIGHT:
      const deletedHighlightVerse = state.highlightedVerse.filter(obj => JSON.stringify(action.payload) != JSON.stringify(obj))
      return {
        ...state,
        highlightedVerse: deletedHighlightVerse
      }

    default:
      return state

  }
}

export default reducer

在开发模式下，它可以正常工作。但是，当我将其更新为正式版APK / IPA时，它始终返回未定义的内容，我也不知道该怎么做。我已经尝试搜索了两天，但仍然不明白为什么。

感谢您阅读此问题，希望有人对此有所帮助：）

Answer 1

谢谢@Clarity @Yossi @ Domino987

这是我的store / index.js

import { AsyncStorage } from 'react-native'
import storage from 'redux-persist/lib/storage'
import { createStore } from 'redux'
import { persistStore, persistReducer } from 'redux-persist'
import reducers from 'ndc-ministry/redux/reducers'

const persistConfig = {
  key: 'root',
  storage: AsyncStorage
}

const persistedReducer = persistReducer(persistConfig, reducers)

export const store = createStore(
  persistedReducer,
)

export const persistor = persistStore(store)

奇怪的是，除了状态是数组之外，我的redux中的每个状态都被存储并持久保存。这就是我在React组件中调度动作的方式

 import { addBibleVerseHighlight } from 'project-name/redux/actions'
    class BibleScreen extends Component {

addHighlight = () => {
    this.state.selectedVersesIndex.map((value) => {
      const verseData = {
        bookIndex: this.props.selectedBookIndex,
        chapterIndex: this.props.selectedChapterIndex,
        verseIndex: value,
      }

        this.props.addBibleVerseHighlight(verseData)

    })
  }

    render() { ... }
    }


    function mapStateToProps({BibleReducer}) {
      return {
        highlightedVerse: BibleReducer.highlightedVerse,
      }
    }

    const mapDispatchToProps = {
      addBibleVerseHighlight,
      removeBibleVerseHighlight,
    }

    export default connect(mapStateToProps, mapDispatchToProps)(BibleScreen)

Answer 2

我认为您在mapStateToProps函数中遇到问题。如果将其更改为具有状态对象（ BibleReducer ）而不破坏函数参数列表中的分配，则需要时，您将在 hightlightedVerse 属性中具有值。

您可以通过调试或执行console.log(BibleReducer)来检查变量值，以测试变量的值在代码中的位置以及显示方式。

原始代码之一-从代码中解构出的值是未定义的：

function mapStateToProps({BibleReducer}) {
  console.log(BibleReducer);

  return {
    highlightedVerse: BibleReducer.highlightedVerse,
  }
}

我想工作的人-您应该有状态对象：

function mapStateToProps(BibleReducer) {
  console.log(BibleReducer);

  return {
    highlightedVerse: BibleReducer.highlightedVerse,
  }
}

请进一步阅读有关解构分配here的信息。

解构赋值语法是一个JavaScript表达式，可以将数组中的值或对象中的属性解压缩为不同的变量。

通过解构，您引用的是state.BibleReducer.highlightedVerse属性，我认为这就是为什么该值显示为未定义的原因。

让我知道这是否可行，如果需要，我们可以进一步考虑。

更新：如果您想使用仍在销毁的配置，则可以采用以下解决方案以仅使用highlightedVerse数组值：

function mapStateToProps({highlightedVerse}) {
   console.log(highlightedVerse);

   return {
      highlightedVerse: highlightedVerse,
   }
}

感谢@Clarity！

Answer 3

我想说是简化您的减速器并删除highlightedVerse字段。然后像对待数组一样对待您的状态，而不是像对象数组一样。

因此，将{}更改为[]。

例如（未经测试）：

import {
  ADD_BIBLE_VERSE_HIGHLIGHT,
  REMOVE_BIBLE_VERSE_HIGHLIGHT,
} from 'ndc-ministry/redux/actions/types'

const INITIAL_STATE = [];

const reducer = (state = INITIAL_STATE, action) => {

  switch (action.type) {
    case ADD_BIBLE_VERSE_HIGHLIGHT:
      const currentHighlightedVerse = [...state];

      if(currentHighlightedVerse.length > 0){
        currentHighlightedVerse.forEach(obj => {
          if(action.payload.bookIndex == obj.bookIndex 
            && action.payload.chapterIndex == obj.chapterIndex 
            && action.payload.verseIndex == obj.verseIndex
          ) {
            return state;
          }
        })
      }

      return [...state, action.payload];


    case REMOVE_BIBLE_VERSE_HIGHLIGHT:
      const deletedHighlightVerse = state.filter(obj => JSON.stringify(action.payload) != JSON.stringify(obj))

      return deletedHighlightVerse;

    default:
      return state

  }
}

export default reducer

这样，在商店的initialState中，您的highlightedVerse字段可以是一个空数组，您可以将此reducer设置为该字段的reducer。

祝你好运。

在Reducer中未定义数组数据的初始状态

3 个答案: