Error Message: Uncaught (in promise) TypeError: Cannot read property 'teampage_details' of undefined in my Redux Thunk middleware Rails API call

Question

I'm having issues trying to implement a call from my redux store to my rails api for the first time and I'm receiving the error below. Would really appreciate some help with this / any useful articles and tutorials on building 2 apps with this stack! Cheers. :)

*Uncaught (in promise) TypeError: Cannot read property 'teampage_details' of undefined
    at receiveTitleAndDescriptions (index.js:3)
    at index.js:20
    at <anonymous>*

rails-api:

teampage_details_controller.rb

module Api::V1
  class TeampageDetailsController < ApplicationController
    def index
      @teampage_details = TeampageDetail.all
      render json: @teampage_details
    end
  end
end

teampage_detail.rb

class TeampageDetail < ApplicationRecord
end

schema.rb:

ActiveRecord::Schema.define(version: 20171101140415) do

  create_table "teampage_details", force: :cascade do |t|
    t.string "teampage_title"
    t.text "service_description"
    t.text "credentials_description"
    t.text "team_origins_description"
    t.text "client_interactions"
    t.text "industry_focus_description"
    t.text "additional_information"
    t.datetime "created_at", null: false
    t.datetime "updated_at", null: false
  end

end

...meanwhile, in my create-react-app I've got the following:

actions/index.js

export const RECEIVE_TITLE_AND_DESCRIPTIONS = "RECEIVE_TITLE_AND_DESCRIPTIONS";

function receiveTitleAndDescriptions(json) {
  const { teampage_details } = json.data;

  return {
    type: RECEIVE_TITLE_AND_DESCRIPTIONS,
    teampage_details
  }
}

function fetchTitleAndDescriptionsJson() {
  return fetch('http://localhost:3001/api/v1/teampage_details.json')
  .then(response => response.json())
}

export function fetchTitleAndDescriptions() {
  return function(dispatch) {
    return fetchTitleAndDescriptionsJson()
      .then(json => dispatch(receiveTitleAndDescriptions(json)))
  }
}

reducers/index.js

import { combineReducers } from 'redux';
import { RECEIVE_TITLE_AND_DESCRIPTIONS } from '../actions';

function titleAndDescriptions(state = [], action) {
  switch(action.type) {
    case RECEIVE_TITLE_AND_DESCRIPTIONS:
      return action.teampage_details;
    default:
      return state;
  }
}

const rootReducer = combineReducers({ titleAndDescriptions });

export default rootReducer;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import TeampageDetail from './containers/TeampageDetail';

import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import rootReducer from './reducers';
import thunk from 'redux-thunk';

import { fetchTitleAndDescriptions } from './actions';

const store = createStore(rootReducer, applyMiddleware(thunk));
store.subscribe(() => console.log('store', store.getState()));
store.dispatch(fetchTitleAndDescriptions());

ReactDOM.render(
  <Provider store={store}>
    <TeampageDetail />
  </Provider>, document.getElementById('root'));

Answer 1

First try to locate where you're problem is coming from : Is your Rails API returning the expected json?

• Test your endpoint (with Postman for example)

• Then, in your action file, log the content of json just before you're trying to destructure it to see what it contains

Answer 2

I recently discovered GraphQl and it has solved all of my problems above. If you haven't learnt it yet, I HIGHLY recommend investing the time in learning this language dedicated to making API calls.

Start with this: https://www.howtographql.com