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

Question

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

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

Index.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 в магазине.Я получаю следующую ошибку:

Ошибка: при заданном действии "SET_SNACKBAR_CONTENT" редуктор "snackbar_content" возвратил неопределенное значение.Чтобы игнорировать действие, вы должны явно вернуть предыдущее состояние.Если вы хотите, чтобы этот редуктор не содержал значения, вы можете вернуть null вместо undefined.

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

dispatch(setSnackbarContent(text));

snackbar-action.JS

export const SET_SNACKBAR_CONTENT = 'SET_SNACKBAR_CONTENT';

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

snackbar-reducer.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 для справки.

Answer 1

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

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

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