React Redux skeleton returning undefined for value from state

Question

Here's the code Sandbox: https://codesandbox.io/s/lp005rj59q

I'm expecting it to display Hello Goodbye , but it's just showing Goodbye

I'm building the skeleton for a new React/Redux app that I'm working on and <h1>{value}</h1> returns undefined. I know this because I put console.log(value) between my render and return method in my class.

I've Mapped State to props:

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

Created my store:

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

const store = createStore(reducers);

export default store;

Created my reducer with initial state of "Hello"

const initialState = {
  value: "Hello"
};

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

export default reducer;

created a connect function:

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

Added value to 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>
    );
  }
}

and passed the store to the provider element:

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

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

What am I missing?

falinsky falinsky · Accepted Answer · 2018-07-24T00:41:14

You're exporting two React components from Clock.js:

Presentational component Clock as named export Clock
Container component which is the result of connecting your presentational component Clock to redux via connect function. It's default export.

But in index.js you're importing just that presentational component Clock:

import {Clock} from "./Clock";

Instead you should import container component:

import Clock from "./Clock";

Please pay attention to absence of curly braces. You can read more about es6 modules on MDN

React Redux skeleton returning undefined for value from state

1 Answers