Component not getting props from Redux store through mapStateToProps

In my react component, I need to get the state from the Redux store as props and use them. I am using mapStateToProps, which is getting the state from the redux store correctly, as the initial values are console.logged correctly. However, all the props in my component are undefined when I use them. I am not making any explicitly asynchronous calls, which seem to be the problem in the previous questions I found, so I am not sure why my component does not have access to these props.

src/components/SearchBar.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import actionType from '../constants/action-types';

class SearchBar extends Component {

  render() {
    return (
      <form>
        <input
          type="text"
          placeholder="Search..."
          value={this.props.filterText}
          onChange={this.onTextChange}
        />
        <p>
          <input
            type="checkbox"
            checked={this.props.inStockOnly}
            onChange={this.onInStockCheckedChange}
          />
          {' '}
          Only show products in stock
        </p>
      </form>
    );
  }
}


function mapStateToProps(state) {
    console.log("SearchBar state:", state);

    return {
        filterText: state.filterText,
        showInStockOnly: state.showInStockOnly
    };
}

function mapDispatchToProps(dispatch) {
    return {
        onTextChange: (evt) => {
            const action = {
                type: actionType.UPDATE_ON_TEXT_CHANGE,
                value: evt.target.value
            };
            dispatch(action);
        },

        onInStockCheckedChange: () => {
            const action = {
                type: actionType.SET_IN_STOCK_ONLY_CHECKED,
            };
            dispatch(action);
        }
    };
}

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

src/reducers/searchBar_reducer.js

import actionType from '../constants/action-types';
import initialState from '../constants/initial-state';


const searchBar = (state = initialState, action) =>{
    console.log('SearchBar reducer running: ', state, action);

    switch (action.type) {

        case actionType.UPDATE_ON_TEXT_CHANGE:
            console.log("Text change action dispatched!")
            return Object.assign({}, state, { filterText: action.value});

        case actionType.SET_IN_STOCK_ONLY_CHECKED:
            console.log("InStockOnly action dispatched!")
            return Object.assign({}, state, { inStockOnly: !state.inStockOnly});

        default:
            return state;
    }
}


export default searchBar;

src/reducers/index.js

import { combineReducers } from 'redux';

import searchBar from './searchBar_reducer'


const rootReducer = combineReducers({
    searchBar
});


export default rootReducer;

src/index.js

import React from 'react';
import { render } from 'react-dom';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
//import App from './components/App';
import SearchBar from './components/SearchBar'
import rootReducer from './reducers/';

const store = createStore(rootReducer);

const unsubscribe = store.subscribe(() =>
  console.log(store.getState())
)

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

1 answer

  • answered 2018-10-11 19:52 Eugene Tsakh

    It's because you are trying to access state.filterText while your data for this reducer is stored in searchBar so you should use state.searchBar.filterText