Начальное состояние данных массива не определено в редюсере

Я думаю, у вас проблема с функцией 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,
  }
}

Дополнительную информацию о присваивании деструктуризации читайте здесь.

Синтаксис деструктурирующего присваивания — это выражение JavaScript, позволяющее распаковывать значения из массивов или свойства объектов в отдельные переменные.

При деструктурировании вы ссылаетесь на свойство state.BibleReducer.highlightedVerse, и я думаю, именно поэтому значение отображается как неопределенное.

Дайте мне знать, если это работает или нет, мы можем подумать дальше, если это необходимо.

ОБНОВЛЕНИЕ: если вы хотите использовать все еще назначение деструктурирования, вы можете использовать следующее решение, чтобы использовать только значение массива highlightedVerse:

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

   return {
      highlightedVerse: highlightedVerse,
   }
}

Спасибо @Clarity за идею!

Спасибо @Clarity @Yossi @Domino987

Вот мой магазин/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)

Странно то, что каждое состояние в моем редуксе хранится и сохраняется ХОРОШО, за исключением случаев, когда состояние является массивом. Вот как я отправляю свое действие в компоненте 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)

Я бы сказал, упростите свой редуктор и удалите поле 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 может быть пустым массивом, и вы можете установить этот редуктор в качестве редуктора для этого поля.

Удачи.