How to trigger a re render if Redux state holds an object and only a property of the object is chang-CodePudding

export const slice = createSlice({
  name: "slice_name",
  initialState: {
    field_1: {a: 1, b: 2}
  },
  reducers: {
    
  },
});

If field_1.a is changed. how can I trigger hooks that listen for this value?

CodePudding user response：

Every component that selects the value of a will automatically rerender if this value changes. This is kind of the whole point of Redux.

const a = useSelector(state => state.slice_name.field_1.a);

CodePudding user response：

You need to connect your component with your redux store. Assuming you have a component named Home you need to do the following:

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

function Home(props) {
  return(
    <div>
      {props.field_1}
    </div>
  )
}

const mapStateToProps = (state) => ({
  field_1: state
})

export default connect(mapStateToProps)(Home)

In mapStateToProps you map the values you need to access from your redux store, then you supply the mapStateToProps in the connect function and finally you can access those values through your component's props.