console.log(this.props.store) returning undefined in my create react app?

Question

I created a create react app and included redux with card lists and a searchbox that displayed the filtered results, the app was working before I added redux but now it isn't returning any results. When I console.log(this.props.store) it is returning undefined. I would really appreciate it if someone can help me with this. My files are as below:

constants.js

export const CHANGE_SEARCH_FIELD = 'CHANGE_SEARCH_FIELD';

actions.js

import {CHANGE_SEARCH_FIELD} from './constants.js';

export const setSearchField = (text) => ({
       type: CHANGE_SEARCH_FIELD,
       payload: text
})

reducer.js

import {CHANGE_SEARCH_FIELD} from './constants.js';

const intialState = {
    searchField: ''
}

export const searchTeacher = (state=intialState, action={}) => {
    switch(action.type) {
        case CHANGE_SEARCH_FIELD:
                return Object.assign({}, state, { searchField: action.payload });
        default: 
                return state;
    }
}

index.js

import ReactDOM from 'react-dom';
import './index.css';
import {Provider} from 'react-redux';
import {createStore} from 'redux';
import App from './App.js'; //Our main parent component
import {searchTeacher} from './reducer.js';
import 'tachyons';
import * as serviceWorker from './serviceWorker';

const store = createStore(searchTeacher)

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

serviceWorker.unregister();

App.js

import React, {Component} from 'react';
import {connect} from 'react-redux';
import CardList from './CardList.js';
import {teacher} from './teacher.js';
import Searchbox from './searchbox.js';
import ErrorBoundry from './ErrorBoundry';
import Scroll from './Scroll.js';
import './App.css';
import {setSearchField} from './actions.js';

const mapStateToProps = state => {
    return {
        searchField: state.searchField
    }
}

const mapDispatchToProps = (dispatch) => {

    return {
        onSearchChange: (event) => dispatch(setSearchField(event.target.value))
    }
}

class App extends Component {

    constructor(){   
         super()
         this.state = {
         teacher: teacher, //teacher: [],  
        }
    }

    render(){
        console.log(this.props.store);
        const { searchField, onSearchchange } = this.props; 
        const filteredteacher= teacher.filter( 
            teacher =>{
                         return teacher.name.toLowerCase().includes(searchField.toLowerCase()); 
                      });
        return(
            <div className="tc">  
              <h1 className="f1"> Faculty Members ! </h1>
              <Searchbox searchChange={onSearchchange} /> 
              <Scroll>
                <ErrorBoundry>
                 <CardList teacher={filteredteacher} />
                </ErrorBoundry> 
              </Scroll>
            </div>
        );
    }
}

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

markerikson, Waheed Akhtar, fadzb thank so much for your reply I did try out your methods and after some debuggings, I found it wasn't the store that was causing the problem, there was a typo, in mapDispatchToProps it is defined as onSearchChange and in render() I used it as onSearchchange. I can't believe it was something so silly that caused so much problem. Thank you once again though, your replies helped me understand the problem much better. — Heba Kaleem, Jun 18 '20 at 19:58

score 0 · Answer 1 · answered Jun 11 '20 at 19:34

There won't be any props.store, because none of your code is passing down a prop named store to that component.

Components that have been wrapped in connect get props from three sources, combined:

Props passed from the parent component
Props returned from mapState
Props returned from mapDispatch

In this case, mapState is returning {searchField}, and mapDispatch is returning {onSearchChange}, and there's no props from the parent. So, the combined props are {searchField, onSearchChange}.

As a side note, you should use the "object shorthand" form of mapDispatch instead of writing it as a function:

const mapDispatch = {onSearchChange: setSearchField};

Waheed Akhtar · Answer 2 · 2020-06-11T20:07:12.357

You will get two props from redux according to your code,

this.props.searchField
this.props.onSearchChange

connect function of react-redux used to connect react and redux.

mapDispatch is used to dispatch your actions which hold the payload(Second argument of connect function)

mapState is used to get the state of your properties(First argument of connect function)

So in your code, there is not any prop named store, Store is a global redux state which you can get with this method Store.getState() but here is store is redux store which you are passing here const store = createStore(searchTeacher) in your index.js file, This will show whole state of the redux store.

here is how you can get the state of your store.

How do I access store state in React Redux?

You will dispatch an action named onSearchChange like below in your on change method.

this.props.onSearchChange(e)

and redux will return you a value of this after storing in reducer with the name of this.props.searchField.

score 0 · Answer 3 · answered Jun 11 '20 at 20:14

this.props.store would only be accessible if it was passed down from a parent component (which you are not doing here)

You create your store in index.js but you are not exposing an interface to it.

const store = createStore(searchTeacher);

You can expose these functions from your index.js file to reference the store:

export const getStore = () => store;
export const getState = () => {  return store.getState(); };

Then from anywhere else (although not good practice):

import { getStore, getState } from 'index.js';

console.log(this.props.store) returning undefined in my create react app?

3 Answers3