如何使用redux和redux-thunk從服務器將獲取的數據保存到組件狀態？

Question

在我的react應用程序中，我有一個名為profile的組件，我正在從服務器中獲取數據並將其顯示在該組件中。 我正在與axios一起使用redux和redux-thunk。 借助mapDispatchToProps函數，我正在調用redux操作，以在安裝組件時獲取該數據並將其保存為redux狀態。 之后，我使用mapStateToProps函數通過道具在屏幕上顯示該數據。 很好 現在，我希望可以編輯例如該用戶的名字。 為了實現這一點，我需要在從服務器獲取數據時將數據保存到組件狀態，然后在更改文本字段時，也需要更改組件狀態。 提取數據后不知道如何立即將數據保存到組件狀態。

簡化代碼：

const mapStateToProps = (state) => {
    return {
        user: state.user
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        getUserData: () => dispatch(userActions.getUserData())
    }
}    

class Profile extends Component {
    state:{
         user: {}
    }

    componentDidMount (){
        this.props.getUserData()
        // when data is saved to redux state i need to save it to component state
    }

    editTextField = () => {
      this.setState({
        [e.target.id]: e.target.value
       })
    };

    render(){

        const { user } = this.props;

        return(
            <TextField id="firstName"
                   value={user.firstName}
                   onChange={this.editTextField}
            />
        )

    }
}

Answer 1

您可以為此使用componentDidUpdate或為操作提供回調函數。 我將同時展示兩者。

首先讓我們看看componentDidUpdate ，

在這里您可以比較以前的數據和現在的數據，並且如果有更改，可以設置狀態，例如，如果數據是數組。

state = { data: [] }

然后在您的componentDidUpdate內部

componentDidUpdate(prevProps, prevState) {
   if(prevProps.data.length !== this.props.data.length) {
    // update your state, in your case you just need userData, so you 
    // can compare something like name or something else, but still 
    // for better equality check, you can use lodash, it will also check for objects, 
    this.setState({ data: this.props.data});
  }
}

_.isEqual(a, b); // returns false if different

這是一個解決方案，另一個解決方案是將回調函數傳遞給您的操作，

假設您調用this.props.getData()

你可以做這樣的事情

this.props.getData((data) => {
 this.setState({ data });
})

在這里，您將數據從redux動作傳遞到狀態。

您的redux動作將是這樣的。

export const getData = (done) => async dispatch => {
  const data = await getSomeData(); // or api call

  // when you dispatch your action, also call your done 
  done(data);
}

Answer 2

如果您使用的是React 16.0+，則可以使用靜態方法getDerivedStateFromProps 。 您可以閱讀有關react docs的內容 。

使用您的示例：

class Profile extends Component {
  // other methods here ...

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

  // other methods here...
}