React-redux component does not rerender on store state change

Question

I'm stating to learn react and redux today, yet I cannot figure out how to force component to rerender after state change.

Here is my code:

const store = createStore(loginReducer);
export function logout() { return {type: 'USER_LOGIN'} }
export function logout() { return {type: 'USER_LOGOUT'} }
export function loginReducer(state={isLogged:false}, action) {
  switch(action.type) {
    case 'USER_LOGIN':
      return {isLogged:true};
    case 'USER_LOGOUT':
      return {isLogged:false};
    default:


         return state;
      }
    }

    class App extends Component {

      lout(){
        console.log(store.getState()); //IT SHOW INITIAL STATE
        store.dispatch(login());
        console.log(store.getState()); //IT SHOWS THAT STATE DID CHANGE
      }

      ////THIS IS THE PROBLEM, 
    render(){
    console.log('rendering')
    if(store.getState().isLogged){
      return (<MainComponent store={store} />);
    }else{
      return (
        <View style={style.container}>
          <Text onPress={this.lout}>
          THE FOLLOWING NEVER UPDATE :( !!{store.getState().isLogged?'True':'False'}</Text>
          </View>
        );
    }    
}

The only way i could trigger update is by using

store.subscribe(()=>{this.setState({reload:false})});

inside constructor, so that i manually trigger an update state of component to force rerender.

but how can i link both store and component states ?

score 39 · Accepted Answer · edited Jun 18 '20 at 22:18

39

Your component is only going to re-render if its state or props are changed. You are not relying on this.state or this.props, but rather fetching the state of the store directly within your render function.

Instead, you should use connect to map the application state to component props. Component example:

import React, { PropTypes } from 'react';
import { connect } from 'react-redux';

export class App extends React.Component {
    constructor(props, context) {
        super(props, context);
    }

    render() {
        return (
            <div>
            {this.props.isLoggedIn ? 'Logged In' : 'Not Logged In'}
            </div>
        );
    }
}

App.propTypes = {
    isLoggedIn: PropTypes.bool.isRequired
};

function mapStateToProps(state, ownProps) {
    return {
        isLoggedIn: state.isLoggedIn
    };
}

export default connect(mapStateToProps)(App);

In this very simplified example, if the store's isLoggedIn value changes, it will automatically update the corresponding prop on your component, which will cause it to render.

I suggest reading the react-redux docs to help you get started: https://redux.js.org/basics/usage-with-react

edited Jun 18 '20 at 22:18

mimic

4,897
7
54
93

answered Jul 30 '16 at 21:01

Danny

3,615
6
43
58

8

Is `App.propTypes` required to use `connect()`? It looks like you just threw that in there. – Kenny Worden Nov 06 '16 at 01:46
Thanks you so much! – Harold Castillo Jul 25 '17 at 08:18
@KennyWorden I know it's probably too late for an answer. But no, you don't need propTypes. PropTypes are just type declaration for variables. They do not serve any other purpose here while thunk middleware is require to use the connect function. https://daveceddia.com/what-is-a-thunk/ – Young Jul 10 '20 at 10:59
1

i have exactly same flow in my component, my other values when change compenent react to it but there is one property that is not triggering rerender even value is changed in redux store any thoughts around it? – Hanzla Habib Jul 19 '20 at 11:40

score 5 · Answer 2 · answered Nov 20 '20 at 20:59

I ended up here because I had written a bad reducer. I had:

const reducer = (state=initialState, action) => {
  switch (action.type) {
    case 'SET_Q':
      return Object.assign(state, {                     // <- NB no {}!
        q: action.data,
      })

    default:
      return state;
  }
}

I needed:

const reducer = (state=initialState, action) => {
  switch (action.type) {
    case 'SET_Q':
      return Object.assign({}, state, {                 // <- NB the {}!
        q: action.data,
      })

    default:
      return state;
  }
}

Thanks so much! This was the right answer for me! – zarathustra Dec 31 '21 at 14:42 — zarathustra, Dec 31 '21 at 14:42

React-redux component does not rerender on store state change

2 Answers2

Linked