mapStateToProps returning an empty object - reactjs

Question

mapStateToProps is returning an empty object and then the correct object. This.props.weights is undefined in my component except for inside render
const mapStateToProps = (state) => {
debugger
return {weights: state.fetchWeights}
}
state = {saveWeight: Array(0), fetchWeights: Array(0)}
const mapStateToProps = (state) => {
debugger
return {weights: state.fetchWeights}
}
state = {saveWeight: Array(0), fetchWeights: Array(1)}
import React, { Component } from 'react';
import { connect } from 'react-redux';
import Weight from '../components/Weight.js';
import '../App.css';
class displayWeights extends Component {
constructor(props) {
super(props);
this.state = {weights: this.props.weights};
}
render() {
return (
<div>
</div>
);
}
}
const mapStateToProps = (state) => {
debugger
return {weights: state.fetchWeights}
}
export default connect(mapStateToProps, {})(displayWeights);
-
import fetch from 'isomorphic-fetch';
export function fetchWeights() {
return function(dispatch){
dispatch({type: 'LOADING'})
var url = 'http://localhost:3001/api/v1/weights.json';
var req = new Request(url);
return fetch(req)
.then(function(response) {
return response.json()
})
.then(function(weights) {
debugger
dispatch({type: 'FETCH_WEIGHTS', payload: weights})
})
}
}
export default (state = [], action) => {
switch (action.type) {
case 'FETCH_WEIGHTS':
debugger
return action.payload
default:
return state;
}
}
import { combineReducers } from 'redux';
import saveWeight from './saveWeightReducer.js';
import fetchWeights from './fetchWeightsReducer.js';
export default combineReducers({
saveWeight,
fetchWeights
});
import React, { Component } from 'react';
import logo from './logo.svg';
import { connect } from 'react-redux';
import {
BrowserRouter as Router,
Route
} from 'react-router-dom';
import DisplayWeights from './containers/DisplayWeights.js'
import NewWeight from './containers/NewWeight.js'
import { fetchWeights } from './actions/fetchWeightsAction.js'
import Chart from './components/Chart.jsx';
import './App.css';
class App extends Component {
componentDidMount() {
this.props.fetchWeights()
}
render() {
return (
<div className="App">
<header className="App-header">
<h1>Welcome to Weight Tracker</h1>
<DisplayWeights />
<NewWeight />
<Chart />
</header>
</div>
);
}
}
export default connect(null, {fetchWeights})(App);
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { Provider } from 'react-redux';
import { store } from './store.js';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
registerServiceWorker();

Answer 1

You are triggering the function call to fetchWeights in App component and the response isn't received until the first render of the DisplayWeights components and hence its undefined in the constructor of DisplayWeight. Also you need to assign props to state, if state is directly derivable form props, unless ofcourse you wish to change it locally and then on a submit update it in the props.