Pass Data Using Redux in REACTJS

I am trying to pass data from a local db.js file using redux in ReactJS. I feel like I am very close, but there is something that I am missing. I am currently getting the following error when I npm start:

TypeError: store.getState is not a function
  

This error occurred during the build time and cannot be dismissed.
This error occurred during the build time and cannot be dismissed.
I am at a complete lose. I have been working at this for 2 days and can not seem to figure out what it is that I am doing wrong. I did get the data to represent before I brought redux in. So I know that I have made the fetch request work on the local file. Once I brought in redux everything stopped working. If anyone could please help me it would be VERY appreciated. If there is any clarification on things, please, let me know.

I will be placing a snippet of db.json as it is to large to place the entire file. It is in

src/data/db.json

{

    "hits": [
        {
            "_index": "issflightplan",
            "_type": "issflightplan",
            "_key": "IDP-ISSFLIGHTPLAN-0000000000000447",
            "_version": 1,
            "_score": null,
            "ContentType": {
                "__deferred": {
                    "uri": "https://bi.sp.iss.nasa.gov/Sites/FP/_api/Web/Lists(guid'a9421c5b-186a-4b14-b7b2-4b88ee8fab95')/Items(252)/ContentType"
                }

I then have a page component in

src/researchPage/researchPage.js

import React, { Component } from "react";
// import ReactDOM from "react-dom";
import './reasearchPage.style.scss'
import { connect } from 'react-redux'
import PropTypes from 'prop-types'
// import { Card, Feed } from 'semantic-ui-react'
import { fetchDataSuccess } from "../../Redux/actions/researchActions";


class ResearchPage extends Component {
    componentDidMount() {
        this.props.fetchDataSuccess();
    }

    render() {
        const hits = this.props.data.map(dataSet => (
            <div key={dataSet.id} className="query-div">
                <h3>{dataSet._index}</h3>
                <p>{dataSet.ContentTypeId}</p>
            </div>
        ))
            return (
                <div>
                    <h1>Record MetaData</h1>
                    {hits}
                </div>
            );
        }
}

const mapStateToProps = state => ({
    data: state.data.hits
})

export default connect(mapStateToProps, {fetchData})(ResearchPage);

I then set up Redux. I will place all of these files consecutively, below:

src/Redux/actions/dataActions.js

import data from '../../data/db.json'

export const FETCH_DATA_BEGIN = "FETCH_DATA_BEGIN";
export const FETCH_DATA_SUCCESS = "FETCH_DATA_SUCCESS";
export const FETCH_DATA_FAILURE = "FETCH_DATA_FAILURE";

export const fetchDataBegin = () => ({
    type: FETCH_DATA_BEGIN
});

export const fetchDataFailure = error => ({
    type: FETCH_DATA_FAILURE,
    payload: { error }
});

export const fetchDataSuccess = async dispatch => {
    dispatch({ type: FETCH_DATA_SUCCESS, payload: data });
};


src/Redux/reducers/data/dataReducer

import {
    FETCH_DATA_BEGIN,
    FETCH_DATA_SUCCESS,
    FETCH_DATA_FAILURE
} from "../../actions/dataAction";

const initialState = {
    data: [],
    pending: false,
    error: null
};

export default function dataReducer(state = initialState, action) {
    switch (action.type) {
        case FETCH_DATA_BEGIN:
            // Mark the state as "loading" so we can show a spinner or something
            // Also, reset any errors. We're starting fresh.
            return {
                ...state,
                pending: true
            };

        case FETCH_DATA_SUCCESS:
            // All done: set loading "false".
            // Also, replace the items with the ones from the server
            console.log(action.payload);
            return {
                ...state,
                pending: false,
                data: action.payload
            };

        case FETCH_DATA_FAILURE:
            // The request failed. It's done. So set loading to "false".
            // Save the error, so we can display it somewhere.
            // Since it failed, we don't have items to display anymore, so set `items` empty.
            //
            // This is all up to you and your app though:
            // maybe you want to keep the items around!
            // Do whatever seems right for your use case.
            return {
                ...state,
                pending: false,
                error: action.error,
                data: []
            };

        default:
            // ALWAYS have a default case in a reducer
            return state;
    }
}

src/Redux/rootReducer

import { combineReducers } from 'redux';
import { persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';

import dataReducer from "./reducers/data/dataReducer";

const persistConfig = {
   key: 'root',
   storage,
   whitelist: ['cart']
};

const rootReducer = combineReducers({
  data: dataReducer,
});

export default persistReducer(persistConfig, rootReducer);

src/Redux/store

import { createStore, applyMiddleware } from 'redux';
import { persistStore } from 'redux-persist';
import thunk from 'redux-thunk'

import rootReducer from './root-reducer';


export const store = createStore(rootReducer, applyMiddleware(thunk));

export const persistor = persistStore(store);

export default { store, persistor };

src/App.js

import researchPage from "./pages/researchPage/reasearchPage";
import Query from './pages/query/query'
import Visualize from "./pages/visualize/visualize";
import Analyze from "./pages/analyze/analyze";
import Configure from "./pages/configure/configure";


class App extends Component{
  render() {
    return(
        <Provider store={ store }>
        <BrowserRouter>
          <div>
            <Navbar/>
            <Switch>
                <Route path="/" component={Home} exact/>
                <Route path="/explore" component={Explore} exact/>
                <Route path="/search" component={search} exact/>
                <Route path="/query" component={Query} exact/>
                <Route path="/visualize" component={Visualize} exact/>
                <Route path="/analyze" component={Analyze} exact/>
                <Route path="/configure" component={Configure} exact/>
                <Route path="/research" component={researchPage} exact/>
            </Switch>
          </div>
        </BrowserRouter>
        </Provider>
    )
  }
}

99 thoughts on “Pass Data Using Redux in REACTJS”

Leave a Comment