React/Redux : Getting property undefined of initial state

Question

I have simple store that has a channelName property as its initial state and currently a simple reducer to update the channel name using input.

Here's my Store.js:

import { createStore } from "redux";
import reducer from "./Reducer";

const store = createStore(reducer);

export default store;

This is what I have in my Reducer.js

const initialState = {
  channelName: "Flying Hawk",
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case "UPDATE_CHANNEL_NAME":
      return {
        ...state,
        channelName: action.payload.channelName,
      };

    default:
      break;
  }
};

export default reducer;

Two components that's using the store are as below:

App.js

import React from "react";
import Screens from "./components/Screens";
import { connect } from "react-redux";

  return (
    <div className="app">
      <h3 className="section">App</h3>
      <h1>Channel: {channelName}</h1>
      <Screens />
    </div>
  );
}

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

export default connect(mapStateToProps)(App);

Settings.js

import React from "react";
import { connect } from "react-redux";
import Navbar from "./Navbar";
import Content from "./Content";
import Footer from "./Footer";

function Settings({ channelName, updateChannelName, user }) {
  return (
    <div
      className="settings"
      style={{
        display: "flex",
        flexDirection: "column",
      }}
    >
      <h3 className="section">Settings</h3>
      <Navbar channelName={channelName} user={user} />
      <div style={{ height: "100%" }}>
        <Content
          channelName={channelName}
          updateChannelName={updateChannelName}
        />
      </div>
      <Footer channelName={channelName} user={user} />
    </div>
  );
}

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

const mapDispatchToProps = (dispatch) => ({
  updateChannelName: (value) =>
    dispatch({
      type: "UPDATE_CHANNEL_NAME",
      payload: { channelName: value },
    }),
});

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

This is as far as I got. When I run my app, I'm getting this error below:

×
TypeError: Cannot read property 'channelName' of undefined
Function.mapStateToProps [as mapToProps]
src/App.js:37
  34 | 
  35 | const mapStateToProps = (state) => {
  36 |   return {
> 37 |     channelName: state.channelName,
  38 |   };
  39 | };
  40 |

I tried to trace back my code but can't seem to find the problem here. What did I miss?

Serhii Yukhnevych · Accepted Answer · 2020-07-27 13:53:07Z

3

The reducer should always return the state.

And you are just break; on default.

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case "UPDATE_CHANNEL_NAME":
      return {
        ...state,
        channelName: action.payload.channelName,
      };

    default:
      return state;
  }
};

answered Jul 27, 2020 at 13:53

Serhii Yukhnevych

2992 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React/Redux : Getting property undefined of initial state

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related