React Redux 骨架从状态返回未定义的值答案

【问题标题】：React Redux skeleton returning undefined for value from stateReact Redux 骨架从状态返回未定义的值
【发布时间】：2018-12-31 11:28:42
【问题描述】：

这里是代码沙盒：https://codesandbox.io/s/lp005rj59q

我希望它显示 Hello Goodbye ，但它只是显示 Goodbye

我正在为我正在开发的新 React/Redux 应用程序构建框架，<h1>{value}</h1> 返回未定义。我知道这一点，因为我将 console.log(value) 放在了我的类中的渲染和返回方法之间。

我已经将状态映射到道具：

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

创建了我的商店：

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

const store = createStore(reducers);

export default store;

创建了初始状态为“Hello”的减速器

const initialState = {
  value: "Hello"
};

function reducer(state = initialState, action) {
  switch (action.type) {
    default:
      return state;
  }
}

export default reducer;

创建了一个连接函数：

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Clock);

this.props 的附加值：

export class Clock extends React.Component {
  render() {
    const { value } = this.props;
    console.log(value);
    return (
      <div>
        <h1>{value}</h1>
        <h2> Goodbye</h2>
      </div>
    );
  }
}

并将商店传递给提供者元素：

const AppWrapper = () => (
  <Provider store={store}>
    <Clock />
  </Provider>
);

render(<AppWrapper />, document.getElementById("root"));

我错过了什么？

【问题讨论】：

标签： javascript reactjs redux react-redux jsx

【解决方案1】：

您正在从 Clock.js 导出两个 React 组件：

演示组件Clock 命名为导出Clock
容器组件，它是通过connect 函数将您的展示组件Clock 连接到redux 的结果。这是默认导出。

但在 index.js 中，您只导入了演示组件Clock：

import {Clock} from "./Clock";

你应该导入容器组件：

import Clock from "./Clock";

请注意没有大括号。您可以在 MDN 上阅读有关 es6 模块的更多信息

【讨论】：

成功了，谢谢！我想我实际上是这样的，将其更改为测试并且从未将其更改回来。我想我可能已经解决了以前的任何问题并且从未注意到，因为我从未切换回正确的导入。我一定要记住展示性导入和容器导入之间的区别。