functional component is not re-rendering when redux state changes

Question

one of my functional components is not re-rendering when the redux state changes:

when the checkbox is checked the redux state changes properly but the component does not re-render and props do not update

I know I should use hooks but for now, I want to understand why this component is not re-rendered? cause I have some other components like this one and they work with redux states properly

Panel9.js:

import { connect } from 'react-redux'
import { registeredUserInput } from '../../actions'

function Panel9(props) {
 return (
  <div>
    <input type="checkbox" onClick={(e) => props.registeredUserInput(e.target.checked)}/>
    <span>search key</span>
    <label for="sNum">from</label>
    <input type="number" id="sNum" name="eNum" placeholder="1"/>
    <label for="eNum">to</label>
    <input type="number" id="eNum" name="eNum" placeholder="10000" />
  </div>
 )
}
const mapStateToProps = state => {
 return {
    tableBooleans: state.tableReducer
 }
}

const mapDispatchToProps = dispatch => {
 return {
    registeredUserInput: bool => dispatch(registeredUserInput(bool))
  }
 }

 export default connect(mapStateToProps, mapDispatchToProps)(Panel9)

tableReducer.js:

 const initialState = {
 registeredInput: false,
 phoneUserInput: false
}

const tableReducer = (state = initialState, action) => {
  //console.log(state, action)
  switch (action.type) {
     case 'REGISTERED_USER_INPUT':
         state.registeredInput = action.bool
         return state
     case 'PHONE_USER':
         return state
     default:
         return state
  }
}

export default tableReducer

Tam Nguyen · Accepted Answer · 2021-03-15 08:39:23Z

2

Try return a new state instead of mutating current state

case 'REGISTERED_USER_INPUT':  
    return {
        ...state,
        registeredInput: action.bool
    }

When you return just state. Redux will ignore any mutation because it use shallow compare.

Read more here: https://redux.js.org/faq/immutable-data#:~:text=React%2DRedux%20performs%20a%20shallow,on%20the%20props%20object%20itself.&text=As%20such%2C%20a%20shallow%20equality,would%20be%20returned%20each%20time.

answered Mar 15, 2021 at 8:39

Tam Nguyen

1814 bronze badges

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

Collectives™ on Stack Overflow

functional component is not re-rendering when redux state changes

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related