React-native Redux Component not re-rendering on state change with boolean value

Question

I'm unable to get my component to re-render once I've called an action and updated my store with my reducer. The actual problem is that I cannot get my modal component to appear once I've clicked a button.

The state updates properly. I'm able to see that the boolean value I have in the store is changing from false to true, but it's not updating my component with the new information. Here's some code below:

// Home Page

import React, { Component } from 'react';
import ModalComponent from '../components/modal.component';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { toggleShowModal } from '../actions/modal-actions';

class HomePage extends Component {
  state = {
    // some values
    showModal: false,
  };

  // added on edit
  componentWillReceiveProps(nextProps) {
    if (nextProps !== this.props) {
      this.setState({
        showModal: nextProps.showModal, 
      })
    }
  }

  _toggleModalVisibility = () => {
    // redux action
    this.props.toggleShowModal();
  }

  render() {
    <ModalComponent isVisible={this.state.showModal} />
  }
}

const mapStateToProps = (state) => {
  return {
    showModal: state.showModal,
  };
};

const mapDispatchToProps = (dispatch) => {
  return bindActionCreators({ toggleShowModal }, dispatch);
};

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

// Actions

import { SHOW_MODAL } from './types';

export const toggleShowModal = () => dispatch => {
  dispatch({
    type: SHOW_MODAL,
    showModal: true,
  });
};

// Reducers (reducers are combined in another file and work fine)

import { SHOW_MODAL } from '../actions/types';

const initialState = {
  showModal: false,
};

export const modalReducer = (state = initialState, action) => {
  switch (action.type) {
    case SHOW_MODAL:
      return {
        ...state,
        showModal: action.showModal,
      };
    default:
      return state;
  }
};

What seems to happen is the store is updated with showModal: true, but it doesn't translate to the view. The code above is just an example because the project is pretty large and overwhelming. I have other pieces in Redux working just fine, for some reason this is not working for me.

Here's a short video on what's happening in my live app It seems like the state changes, but doesn't update the view until I do something like try and scroll up on the FlatList on that page.

have you used combinereducers?

Sarmad Shah
– Sarmad Shah

2019-01-28 15:55:08 +00:00
Commented Jan 28, 2019 at 15:55 — Sarmad Shah
– Sarmad Shah, Commented Jan 28, 2019 at 15:55
I mean do you . have multiple reducers?

Sarmad Shah
– Sarmad Shah

2019-01-28 15:55:19 +00:00
Commented Jan 28, 2019 at 15:55 — Sarmad Shah
– Sarmad Shah, Commented Jan 28, 2019 at 15:55
@Sarmad Yes I do have a file combining reducers.

A3mercury
– A3mercury

2019-01-28 15:57:13 +00:00
Commented Jan 28, 2019 at 15:57 — A3mercury
– A3mercury, Commented Jan 28, 2019 at 15:57

Sarmad Shah · Accepted Answer · 2019-01-28 16:02:51Z

4

const mapStateToProps = (state) => {
  return {
    showModal: state.showModal,
  };
};

As I see in the above code, You are using state.showModal to get the showModal variable, well you can't as you have used an object in your reducers, So it shall be something like

return {
    showModal: state.reducerName.showModal,
  };

Where reducerName is the reducer key you have used inside combineReducers

One more thing, Your componentWillReceiveProps logic won't work too, as you are comparing two objects.

I would recommend you to use componentDidUpdate() as cWRP is not recommended. and also check compare this.props.showModel instead of this.props. for example

this.props.showModal !== nextProps.showModal You can read more about object equality here

http://adripofjavascript.com/blog/drips/object-equality-in-javascript.html

edited Jan 28, 2019 at 16:02

answered Jan 28, 2019 at 15:57

Sarmad Shah

3,8053 gold badges25 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

A3mercury Over a year ago

You're right, this is what I get for writing example code. In my real project, it is using the reducer name. Other parts of redux work fine, even on this component.

Sarmad Shah Over a year ago

It would be better if you show your real code, not all of it. But don't post the wrong code as it can be misleading.

A3mercury Over a year ago

I forget that CWRP is not used anymore. I did make those changes, but I'm still running into the same problem. I posted a small edit video to get a better feel of what it's looking like when using the app.

A3mercury · Accepted Answer · 2019-02-14 15:17:06Z

0

Thanks for all the help. I figured out that I wasn't exporting my reducers correctly.

answered Feb 14, 2019 at 15:17

A3mercury

1661 silver badge7 bronze badges

Collectives™ on Stack Overflow

React-native Redux Component not re-rendering on state change with boolean value

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related