无法读取未定义的属性“ map”，因为reducer有问题

Question

我阅读了很多与此有关的问题，但我无法完成这项工作。

我收到此错误是因为我认为我的combineReducers设置错误。 错误中的List.jsx无法在RootReducer.js中保留articles映射

我有这个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 };
};