How to Update Component State on Redux State Change

how to auto refresh component when redux state get updated

The first question

Short answer:

you must call the selector function with useSelector hook. you are calling it directly in your <h5> element. so it's not working.

const TopBar = () => {
  const username = useSelector(() => store.getState().userNameRecuder.name)

  return(
    <h5>{username}</h5>
  )
}

Long answer with best practices:

You need to create a selector and use it in your component to re-render your component after the state changes.

In the selector.js

const selectUsername = (state) => state.userNameRecuder.name

export selectUsername;

Now, in your Topbar component, you need to implement the useSelector hook:

import {useSelector} from 'react-redux';
import {selectUsername} from 'store/selectors';

function TopBar () {
  
  const username = useSelector(selectUsername)

  return (
    <p>username</p>
  )
}

Updating the state with proper action (to update username) will cause a re-render in the Topbar component to get the new username from the store.

The second question

There are many great ways to persist data for example storing them on cookies, localStorage or using third-party libraries like redux-persist, and so on...
take a look at this post.

How update render when redux state updated?

Since you don't have much functionality taking place in either of these components, then I would suggest mapping in-line rather than utilizing an additional function (renderAside) for this process. You don't either have anything that requires a stateful/class component, so I would suggest changing this to a functional component to avoid needing a constructor. If you need state later, just use hooks.

Another thing to note is that with ES6, you should be using arrow functions.

renderAside(){ /// change this function to an arrow function
renderAside = () => { /// should be

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

const Aside = (props) => {
  let { cart } = props;
  console.log(cart);

  return (
    <div>
      {cart.map((item, key) => {
        return (
          <div className="aside-item" key={key}>
            <div className="aside-item__name">{item.product.name}</div>
          </div>
        );
      })}
    </div>
  );
};

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

export default connect(mapStateToProps)(Aside);

In the future.... If you're trying to dynamically update the DOM with new elements then you'd need to invoke your mapping function. You're calling it when the page is first rendered. The DOM isn't going to update just because something new is added. You have to re-render that data. In a stateful component you would update the state variable then invoke your mapping function each time that state has been successfully updated.

How to update component state on through out redux

You can achieve this in two ways I think,

1- You can use Redux state this.props.status directly in your component instead of this.state.status, this way you would dispatch an action on onCloseClick that would update Redux store and change status to false.

2- Though it's not recommended usually, You can drive state from props using life getDerivedStateFromProps as

static getDerivedStateFromProps(props) {
  return {
           status: props.status
  }
}

Now your component's internal state is derived from props.

You can read more about getDerivedStateFromProps Here

Hope it helps

change useState when redux state change

To whomever is reading this and is a rookie in react like me.
The solution for me was to use useEffect hook; And whenever useSelector updates the state constant, the useEffect hook will use the useState set function to update the state.

See added code below that fixed my problem:

 useEffect(() => {
    setformsEQ([...state])
 
  }, [state])

---

Related Topics