Состояние Redux возвращается как неопределенное, несмотря на то, что Redux devtools правильно отображает хранилище

Question

Когда console.log находится в состоянии или пытается выполнить рендеринг в компоненте, мой магазин возвращается как undefined.Однако в React devtools хранилище отображается как и ожидалось.

index.js с фиктивными вызовами диспетчеризации

import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import { addItem } from "./actions/actions";
import configureStore from "./store/configure-store";
import DashboardPage from "./components/DashboardPage";

const store = configureStore();

store.dispatch(addItem({ description: "item 1" }));
store.dispatch(addItem({ description: "item 2" }));
store.dispatch(addItem({ description: "item 3" }));

const jsx = (
  <Provider store={store}>
    <DashboardPage />
  </Provider>
);

ReactDOM.render(jsx, document.getElementById('root'));

config-store.js

import { createStore } from 'redux';
import reducer from "../reducers/reducer";

export default () => {
  const store = createStore(
    reducer,
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());
  return store;
};

DashboardPage.js

import React from "react";
import { connect } from "react-redux";

const DashboardPage = (props) => {
  console.log(props.items); // for debugging
  return (
    <div>
      <h1>Items:</h1>
      <p>{props.items}</p>
    </div>
  )
};

const mapStateToProps = (state) => {
  return { items: state.items };
};

export default connect(mapStateToProps)(DashboardPage);

reducer.js

const reducerDefaultState = [];

export default (state = reducerDefaultState, action) => {
  switch (action.type) {
    case 'ADD_ITEM':
      return [
        ...state,
        action.item
      ];
    default:
      return state;
  }
};

actions.js

export const addItem = (description = "") => ({
  type: 'ADD_ITEM',
  item: { description }
});

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

Answer 1

Ваш штат - массив, у которого нет свойства items.Попробуйте использовать этот код:

const mapStateToProps = (state) => {
  return { items: state };
};

Или измените ваш редуктор / createStore на что-то вроде этого

import { createStore, combineReducers } from 'redux';
import reducer from "../reducers/reducer";

export default () => {
  const store = createStore(
    combineReducers({items: reducer}),
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());
  return store;
};

https://redux.js.org/api/combinereducers