Учитывая действие «X», редуктор «Y» вернул неопределенное значение.

У меня проблема с Redux в React. После ввода заголовка этой темы я просмотрел некоторые вопросы, которые были связаны, но я не смог найти ответ на ту же проблему для моего случая.

У меня есть следующие файлы:

Индекс.JS

import snackbarContentReducer from '../src/shared/redux/reducers/snackbar-reducer';
import shoppingCartReducer from '../src/shared/redux/reducers/shopping-cart-reducer';
import userReducer from '../src/shared/redux/reducers/user-reducer';

const store = createStore(
    combineReducers(
        {
            //user: userReducer,
            //shopping_cart: shoppingCartReducer,
            snackbar_content: snackbarContentReducer
        }
    )
    ,window.devToolsExtension && window.devToolsExtension());


ReactDOM.render(<Provider store={store}><App /></Provider>, document.getElementById('root'));

Пользовательская и корзина покупок еще не реализованы, действия и редукторы для них еще не имеют кода.

App.JS

import { connect } from 'react-redux';
import { setSnackbarContent } from '../src/shared/redux/actions/snackbar-actions';

class App extends Component {

  render() {
    return (
      <BrowserRouter>
          <div>
            { console.log(this.props.snackbar_content) }
            { this.props.setSnackbarContent('nieuw') }

            //Cleared my routes here 

          </div>
      </BrowserRouter>
    );
  }
}

export default connect(mapStateToProps,mapDispatchToProps)(App);

function mapStateToProps(state){
  return {
    snackbar_content: state.snackbar_content
  }
}

function mapDispatchToProps(dispatch){
  return {
      setSnackbarContent : (text) => {
        dispatch(setSnackbarContent(text));
      }
  }
}

Я могу получить реквизит из магазина (поскольку они отображаются из состояния в реквизит). Но я не могу изменить snackbar_content в магазине. Ошибка, которую я получаю, следующая:

Error: Given action "SET_SNACKBAR_CONTENT", reducer "snackbar_content" returned undefined. To ignore an action, you must explicitly return the previous state. If you want this reducer to hold no value, you can return null instead of undefined.

Это вызвано следующей строкой:

dispatch(setSnackbarContent(text));

закусочная-action.JS

export const SET_SNACKBAR_CONTENT = 'SET_SNACKBAR_CONTENT';

export function setSnackbarContent(text){
    return { 
        type: SET_SNACKBAR_CONTENT, 
        payload: text
    }
}

закусочная-редуктор.JS

import { SET_SNACKBAR_CONTENT } from '../actions/snackbar-actions';

export default function snackbarContentReducer(state = 'init snackbar', action){

    if(action.type === SET_SNACKBAR_CONTENT){
        return action.payload.snackbar_content;
    }

    return state;
}

Почему возникает эта ошибка и как это исправить?

Заранее спасибо.

PS: я новичок в Redux, я использовал официальную документацию и несколько видео на YouTube для справки.

ваш редуктор возвращает snackbar_content, который будет неопределенным. Действие использует payload

dashton 22.05.2019 12:10
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Сравнение структур данных: Массивы и объекты в Javascript
Сравнение структур данных: Массивы и объекты в Javascript
Итак, вы изучили основы JavaScript и хотите перейти к изучению структур данных. Мотивация для изучения/понимания Структур данных может быть разной,...
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Прошлая статья была первой из цикла статей о создании системы электронной коммерции с использованием Keystone.js, и она была посвящена главным образом...
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
1
1
1 390
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Похоже, вы ищете snackbar_content в своей полезной нагрузке действия, но вы никогда не устанавливаете ее, вместо этого вы устанавливаете полезную нагрузку так, как вы ожидаете от состояния.

Другими словами, в вашем редюсере просто верните payload как состояние

if(action.type === SET_SNACKBAR_CONTENT){
    return action.payload;
}

Вы (и я) забыли добавить оператор default case for switch в редуктор.

default:
   return state;

Другие вопросы по теме