CODEWITHSUNDEEP
javascriptreactjsreduxreact-redux
Jim Peeters
Jim Peeters

Reputation: 2853

Why is my state not mapped to my properties after change?

My container: 

import React, { Component } from 'react';
import { connect } from 'react-redux';
import Example from '../components/example.jsx';

class ExampleContainer extends Component {
  render() {
    return (
      <Example isUploading={this.props.isUploading}/>
    );
  }
}

const mapStateToProps = (state) => ({
  isUploading: state.isUploading
});

export default connect(mapStateToProps)(ExampleContainer);

My reducer : 

import { combineReducers } from 'redux';
import * as actionTypes from '../constants/action-types.js';

const initialState = {
  isUploaded: false,
  isUploading: false
};


function isUploading(state = initialState, action) {
  switch (action.type) {
    case actionTypes.IS_UPLOADED:
      return action.payload;
    default:
      return state;
  }
}

function isUploaded(state = initialState, action) {
  switch (action.type) {
    case actionTypes.IS_UPLOADING:
      return action.payload;
    default:
      return state;
  }
}

export default combineReducers({
  isUploading,
  isUploaded,
});

I see my isUploading state changing in my console but the property isUploading on my Example component is not changing. It has the same value as the property that was defined at the first time. I also see that the mapStateToProps function is only being called once.

Upvotes: 0

Views: 44

Answers (1)

Dave Newton
Dave Newton

Reputation: 160181

(Moved from comment for space and formatting.)

Where is your reducer mapped to? E.g., if your reducer is mapped like this:

export const rootReducer = combineReducers({
  uploading: uploadingReducer,
  // etc
})

then your mapStateToProps would be (noting state destructuring):

const mapStateToProps = ({ uploading }) => ({
  isUploading: uploading.isUploading
});

It's likely it's changing as expected, but instead of passing a boolean, you're passing the entire state contained in the reducer.

Upvotes: 1

Related Questions