如何在react-redux中使用reducer状态的值更新组件的状态？

Question

I have reducer that gives me carReducer , which I can use as props in EditCar Component:

My carReducer is:

export default function carReducer(state = {}, action) {
    switch (action.type) {
        case 'GET_SINGLECAR':
            return {
                ...state,
                next: action.payload
            }
            break;
    }
    return state;
}

And in EditCar Component I have declared carReducer as:

    function mapStateToProps(state) {
        return {
            carReducer: state.carReducer
        }
    }

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

Now in the same component I want to update my intialState cardata with this carReducer before the component loads.

constructor(props) {
    super(props);
    this.state = {
        cardata: {}
    }
}

I tried using componentWillReceiveProps but this gives me undefined in both nextProps.carReducer and this.props.carReducer .

componentWillReceiveProps(nextProps) {
    if (nextProps.carReducer != this.props.carReducer) {
        this.setState({ cardata: nextProps.carReducer });
    }
} 

I am new in react-redux so any help is highly appreciated. Thank you.

Answer 1

There is no need to use componentWillRecieveProps in this case. Just replace next with carReducer in your reducer

Answer 2

Method 1 - Try to use componentDidMount()

componentDidMount() {
  this.setState = ({
    cardata: this.props.carReducer
  })
}

Method 2 - You can try to do it in the constructor itself

constructor(props) {
  super(props);
  this.state = {
    cardata: props.carReducer
  }
}