Ловушка useSelector возвращает undefined из начального состояния - PullRequest
Новая
       20

Ловушка useSelector возвращает undefined из начального состояния

0 голосов
/ 03 августа 2020

Я играю со стеком React / Redux / TypeScript и пытаюсь понять, как он работает и должен работать.

У меня есть простое тестовое приложение, и когда я пытаюсь получить данные из начальное состояние - я получаю все значения как undefined (независимо от того, что я пытаюсь получить из начального состояния).

См. код ниже:

Компонент: 

import { useSelector, useDispatch } from 'react-redux';
import { CurrencyExchangeState } from '../store/exchange/types';

export const Exchange = () => {

    // tried this before - same result
    // const currentCurrency = useSelector<CurrencyExchangeState,
    //     CurrencyExchangeState["currentCurrency"]>
    //     (state => state.currentCurrency);

    const selectCurrentCurrency = (state: CurrencyExchangeState) => state.currentCurrency
    const currentCurrency = useSelector(selectCurrentCurrency)
    
    console.log(currentCurrency) // undefined
    // <...>

Типы Интерфейс '../store/exchange/types.ts':

export interface CurrencyExchangeState {
    sum: number,
    mode: string,
    currentCurrency: string
}

Reducer' ..store / exchange / reducers.ts ': 

import {
  CurrencyExchangeState,
  CurrencyExchangeActionTypes,
  // ...
} from './types'

const initialState: CurrencyExchangeState = {
  sum: 0,
  mode: BUY_MODE,
  currentCurrency: UAH_CURRENCY
}

export function currencyExchangeReducer(
  state = initialState,
  action: CurrencyExchangeActionTypes
): CurrencyExchangeState {
  switch (action.type) {
    case TOGGLE_BUY_SALE:
      return {
        ...state,
        mode: action.payload
      }
    case SWITCH_CURRENCY:
      return {
        ...state,
        currentCurrency: action.payload
      }
    default:
      return state
  }
}

Redux Store index file '../store/index.ts':

import { combineReducers, createStore } from 'redux';
import { currencyExchangeReducer } from './exchange/reducers'

const rootReducer = combineReducers({
    currencyExchangeReducer: currencyExchangeReducer
})

export type RootState = ReturnType<typeof rootReducer>
export const exchangeStore = createStore(rootReducer)

Не могли бы вы указать, что может быть неправильным?

1 Ответ

0 голосов
/ 03 августа 2020

Похоже, вы уже обернули свой редуктор валюты, используя combineReducers, поэтому, чтобы получить его, вам нужно выбрать следующее: 

const selectCurrentCurrency = (state: CurrencyExchangeState) => state.currencyExchangeReducer.currentCurrency)
...