CODEWITHSUNDEEP
reactjsredux
Canovice
Canovice

Reputation: 10163

Loading Data from MongoDB into Redux Store fetching from my node API

I am working on my very first react app, and I have successfully setup my Node API and MongoDB, and am now trying to integrate redux into my application. I will try to share the relevant code snippets here.

First, in my node API, I have a model mlb_ids_logos_colors.js with some baseball data. My react app is currently getting this data using the following fetch using an async function:

export async function get_mlb_ids_logos_colors() {
    return fetch('/mlb/mlb_ids_logos_colors')
    .then(resp => { 
        return resp.json();
    })
}

I would like to get the data from this endpoint into my redux store, and then from the redux store into the various components that will use it, but I am a bit stuck. As far as redux, I have the following files:

reducers/index.js (my rootReducer)

import { combineReducers } from 'redux';
import mlbIdsLogosColorsReducer from './mlb-ids-logos-colors-reducer';

export default combineReducers({
    mlbIdsLogosColorsReducer
})

reducers/mlb-ids-logos-colors-reducer.js

export default function reducer (state={
  mlbIdsLogosColorsData: [],
}, action) {

  switch (action.type) {
    case "FETCH_COLORS": {
      return {...state, mlbIdsLogosColorsData }
    }
  }
  return state;
}

actions/mlb-ids-logos-colors-action.js

export const FETCH_COLORS = "FETCH_COLORS";

export function fetchMlbIdsLogosColors() {
  return function(dispatch) {
    dispatch({type: "FETCH_COLORS"});

    fetch('/mlb/mlb_ids_logos_colors')
    .then(resp => {
      return resp.json();
    })
  }
}

lastly, I setup my store in **store.js* as follows, and import this into my apps main index.js file:

store.js 

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

const initialState = {};
const middleware = [thunk];
const store = createStore(
    rootReducer, 
    initialState,
    applyMiddleware(...middleware),
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);

export default store;

Any help with this is appreciated. For reference, I am receiving the following error when launching the app: 

./src/reducers/mlb-ids-logos-colors-reducer.js
Line 7:  'mlbIdsLogosColorsData' is not defined  no-undef

I'm aware this is a quite-obvious error message, but admittidly I'm not sure where I should be defining mlbIdsLogosColorsData.

Thanks in advance!

EDIT: I don't have to make any changes ever to the data at my /mlb/mlb_ids_logos_colors endpoint. I just want to get this data into the redux store, and then from the redux store into the components. I know to use mapStateToProps() and connect() in my components to get the data into the components.

EDIT2: I HAVE DIFFERENT NAMES FOR THE ACTION! let me fix that, and see if that resolves the issue!

Upvotes: 2

Views: 1880

Answers (1)

devserkan
devserkan

Reputation: 17598

I'm in a hurry sorry if I misleading you but roughly you are dispatching an action without data. You should use something like that in your action creator:

export function fetchMlbIdsLogosColors() {
    return function(dispatch) {
        fetch('/mlb/mlb_ids_logos_colors')
           .then(resp => {
               return resp.json()
           .then( json => dispatch({type: "FETCH_COLORS", json}));
    })
  }
}

and then use this payload (json) in your reducer like that:

export default function reducer (state={
  mlbIdsLogosColorsData: [],
}, action) {

  switch (action.type) {
    case "FETCH_COLORS": {
      return {...state, mlbIdsLogosColorsData: action.json }
    }
  }
  return state;
}

Again, this is a rough suggestion. I did not check your whole code. But you are getting undefined error since there is not a variable named mlbIdsLogosColorsData right now.

Upvotes: 4

Related Questions