CODEWITHSUNDEEP
reactjsreduxreact-redux
teamjustin
teamjustin

Reputation: 121

Cannot get value from Redux store

I'm having trouble retrieving data from the Redux store. Redux logger is showing the data but can't seem to get it to render. Below is the code for my container component and my action/reducer:

//COMPONENT:
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { fetchGrade } from '../../modules/smiles';

class Main extends Component {
  componentDidMount() {
    this.props.fetchSmile();
    console.log(this.props);
  }

  render() {
    const { smiles } = this.props;
    return (
      <div>
        <h1>This is the Main Component</h1>
      </div>
    );
  }
}

const mapStateToProps = state => {
  return { smiles: state.smiles };
};

const mapDispatchToProps = dispatch => {
  return {
    fetchSmile: params => dispatch(fetchGrade(params))
  };
};

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

//ACTION/REDUCER:
import axios from 'axios';
const ADD_GRADE = 'SMILES/ADD_GRADE';

export function reducer(state = {}, action) {
  switch (action.type) {
    case ADD_GRADE:
      return {
        ...state,
        grade: action.payload
      };

    default:
      return state;
  }
}

export const fetchGrade = () => {
  return dispatch => {
    axios
      .get('/api/test')
      .then(res => dispatch({ type: ADD_GRADE, payload: res.data }));
  };
};

//STORE:
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import { composeWithDevTools } from 'redux-devtools-extension';
import logger from 'redux-logger';
import reducer from '../modules';

let store;

export function configureStore(state: {}) {
  if (!store) {
    store = createStore(
      reducer,
      state,
      composeWithDevTools(applyMiddleware(logger, thunk))
    );
  }

  return store;
}

//INDEX.JS:
import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';

import './index.css';
import App from './components/App';
import registerServiceWorker from './registerServiceWorker';
import { configureStore } from './store';

window.store = configureStore();

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

registerServiceWorker();

I really don't know if this is complicated or an easy fix. I feel like I'm doing everything right but no luck.

Upvotes: 1

Views: 1332

Answers (1)

Sagiv b.g
Sagiv b.g

Reputation: 31024

You named your reducer, reducer: 

export function reducer(state = {}, action) {

Seems that you forgot to access it from your reducer object. it should be something like this: 

const mapStateToProps = state => {
  return { smiles: state.reducer.smiles };
};

Upvotes: 1

Related Questions