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 };
};

或将reducer / 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

尽管Redux开发人员工具正确显示了商店

1 个答案: