Невозможно прочитать свойство map из undefined, так как у редуктора есть проблемы

Question

Я читал, что есть много вопросов по этому поводу, но я не могу сделать эту работу.

Я получаю эту ошибку, потому что я думаю, что мои combineReducers настроены неправильно. Ошибка List.jsx не захватывает карту articles в RootReducer.js

У меня есть этот configureStore.js

import { combineReducers } from "redux";
import { createStore, applyMiddleware, compose } from "redux";
import { forbiddenWordsMiddleware } from "../middleware";
import  ToastsReducer from '../reducers/ToastsReducer';
import  RootReducer from '../reducers/RootReducer';

const storeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

const reducers = {
     Toasts: ToastsReducer,
     RootReducer: RootReducer
  };

  const reduce = combineReducers({
    ...reducers,
  });

const store = createStore(
    reduce,
    storeEnhancers(applyMiddleware(forbiddenWordsMiddleware))
);
export default store;

а это файлы редукторов

RootReducer.js

import { ADD_ARTICLE } from "../constants/action-types";
import { FOUND_BAD_WORD } from "../constants/action-types";

const initialState = {
  articles: []
};
export default function reducer(state = initialState, action) {
  if (action.type === ADD_ARTICLE) {
    return Object.assign({}, state, {
      articles: state.articles.concat(action.payload)
    });
  }

  if (action.type === FOUND_BAD_WORD) {
    //return Object.assign({}, state, {
    //  articles: state.articles.concat(action.payload)
    // });
  }
  return state;
}

ToastsReducer.js

import { ADD_TOAST, REMOVE_TOAST } from "../constants/action-types";

export default function toasts(state = [], action) {
  const { payload, type } = action;

  switch (type) {
    case ADD_TOAST:
      return [payload, ...state];

    case REMOVE_TOAST:
      return state.filter(toast => toast.id !== payload);

    default:
      return state;
  }
}

List.jsx

import React from "react";
import { connect } from "react-redux";
const mapStateToProps = state => {
    return { articles: state.articles };
};
const ConnectedList = ({ articles }) => (
    <ul className="list-group list-group-flush">
        {articles.map(el => (
            <li className="list-group-item" key={el.id}>
                {el.title}
            </li>
        ))}
    </ul>
);
const List = connect(mapStateToProps)(ConnectedList);
export default List;

Answer 1

Я полагаю, что вы неправильно выполняете mapStateToProps.ты можешь сделать что-то подобноеНадеюсь, это поможет.

const mapStateToProps = state => {
    return { articles: state.RootReducer.articles };
};