Ошибка - ошибка типа: не удается прочитать свойство "значение" неопределенного

#javascript #reactjs #redux

Вопрос:

Я использую React-Redux, и это мой фрагмент —

 import { createSlice } from "@reduxjs/toolkit";

export const balanceSlice = createSlice({
  name: "balance",
  initialState: {
    value: 0,
  },
  reducers: {
    increment: (state) => {
      state.value  = 10000;
    },
    decrement: (state) => {
      state.value -= 10000;
    },
  },
});

export const { increment, decrement } = balanceSlice.actions;

export const selectCount = (state) => state.balance.value;

export default balanceSlice.reducer;

В браузере я получаю эту ошибку — ошибка типа: не удается прочитать свойство «значение» неопределенного
Эта ошибка указывает на предпоследнюю строку.
То, что я вижу balance , определено, тогда почему это выдает ошибку?

Следует отметить, что в инструментах Chrome Redux Devtools существует counter состояние balance , отличное от того, которое я определил.

1. Пожалуйста, отредактируйте вопрос, чтобы добавить некоторые записи и показать, что вы наблюдаете в каждой строке. Вы также должны сказать что-нибудь о том, что вы делаете, чтобы запустить этот код и воспроизвести проблему.

2. куда вы хотите, чтобы я добавил журнал?

3. проверьте значение состояния внутри selectCount метода. Согласно ошибке, баланс не определен в состоянии.

4. разве имя: «баланс» не объясняет, к какому состоянию мы пытаемся получить доступ

Ответ №1:

Это balanceSlice ваш единственный редуктор или вы используете combineReducers его для объединения с другими редукторами?

Эта ошибка указывает на то, что в вашем состоянии не вызывается свойство верхнего уровня balance . Итак, это возможности:

1) у вас есть куча редукторов, вложенных таким образом, что balance не находится на верхнем уровне

2) вы присвоили этому редуктору другое имя ключа при объединении ( counter ?)

3) этот редуктор — это все ваше состояние, и в этом случае balance свойства нет, потому что все состояние — это баланс.

Если это # 1, вам нужно определить путь к этому фрагменту в вашем состоянии.

Если это # 2, исправьте свой combineReducers .

Если это # 3, измените свой селектор на (state) => state.value .

Следует отметить, что в инструментах Chrome Redux Devtools есть состояние для счетчика, а не баланс, как я определил.

Я почти уверен, что это # 2. Я думаю, вы скопировали a combineReducers из документации, не понимая, что она делает.

Ваш редуктор выглядит так?

 import balanceReducer from "./reducer"
// ^ or whatever you called it

const reducer = combineReducers({
  counter: balanceReducer,
})

Функция combine reducers принимает объект key-value из reducers . Ключ (который есть counter ) становится именем свойства в state , а значение является редуктором для этого свойства. Вы хотите, чтобы ваше свойство вызывалось balance , поэтому нам нужно присвоить его balance ключу. Важен этот ключ, а не имя фрагмента, хотя обычно они совпадают.

 import balanceReducer from "./reducer"

const reducer = combineReducers({
  balance: balanceReducer,
})