我应该如何调度操作以使用反应组件和 redux 获取数据？

Question

我正在使用 axios 获取数据，然后使用 redux 将状态映射到道具，但我遇到了问题。如果我在componentDidUpdate() 中分派动作，动作将无限期执行，如果我使用constructor(props)，我会得到props 的未定义值，我也尝试过componentDidMount，但我得到了未定义的概率值。有没有办法使用反应组件调度动作？

我在第二次渲染中从state 获得了正确的数据。

import React, { Component } from 'react'
import {connect} from 'react-redux'
import { getUserPosts } from '../../actions'

class UserPosts extends Component {

    //UNSAFE_componentWillMount() {

    //}
    constructor(props) {
        super(props);
        console.log(props);
    }


    componentDidUpdate() {
        //this.props.dispatch(getUserPosts(this.props.user_reducer.login?.user._id));
    }

    showUserPosts = (user) => (

        Array.isArray(user.userPosts) ?
          user.userPosts.map((item, i) => (
                <tr key={i}>
                <td>{i}</td>
                <td>author</td>
                <td>date</td>
                </tr>    

          ))
        : null    

    )

    render() {
        let user = this.props.user_reducer;
        //console.log(user.userPosts);
        return (
            <div>
               <div className="user_posts">
                   <h4>Your reviews:</h4>
                   <table>
                       <thead>
                           <tr>
                               <th>Name</th>
                               <th>Author</th>
                               <th>Date</th>
                           </tr>
                       </thead>
                       <tbody>
                           {this.showUserPosts(user)}
                       </tbody>
                   </table>
               </div>
            </div>
        )
    }
}

function mapStateToProps(state) {
    //console.log(state);
    return {
        user_reducer: state.user_reducer
    }
}

export default connect(mapStateToProps)(UserPosts)

行动：

export function getUserPosts(userId) {
    const req = axios.get(`/api/user_posts?user=${userId}`)
                .then(res => res.data);

    return {
        type: 'GET_USER_POSTS',
        payload: req
    }
}

减速器：

export default function(state = {}, action) {
    switch(action.type) {
        case 'USER_LOGIN':
            return {...state, login: action.payload}
        case 'USER_AUTH':
            return {...state, login: action.payload}
        case 'GET_USER_POSTS':
            return {...state, userPosts: action.payload}
        default: return state; 
    }
}

Answer 1

派发动作的正确位置是在 componentDidMount 中。但是，由于您的数据获取是异步的，因此您必须在 reducer 中保持加载状态，直到您的数据被获取

export default function(state = {isPostLoading: true}, action) {
    switch(action.type) {
        case 'USER_LOGIN':
            return {...state, login: action.payload}
        case 'USER_AUTH':
            return {...state, login: action.payload}
        case 'GET_USER_POSTS':
            return {...state, userPosts: action.payload, isPostLoading: false}
        default: return state; 
    }
}

---

class UserPosts extends Component {

    constructor(props) {
        super(props);
        console.log(props);
    }


    componentDidMount() {
       this.props.dispatch(
           getUserPosts(this.props.user_reducer.login?.user._id) 
      );
    }
    componentDidUpdate(prevProps) {
       if(this.props.user_reducer.login?.user._id !== prevProps.user_reducer.login?.user._id) {
          this.props.dispatch(getUserPosts(this.props.user_reducer.login?.user._id));
       }
    }

    showUserPosts = (user) => (

        Array.isArray(user.userPosts) ?
          user.userPosts.map((item, i) => (
                <tr key={i}>
                <td>{i}</td>
                <td>author</td>
                <td>date</td>
                </tr>    

          ))
        : null    

    )

    render() {
        let user = this.props.user_reducer;
        if(user.isPostLoading) {
            return <div>Loading....</div>
        }
        return (
            <div>
               <div className="user_posts">
                   <h4>Your reviews:</h4>
                   <table>
                       <thead>
                           <tr>
                               <th>Name</th>
                               <th>Author</th>
                               <th>Date</th>
                           </tr>
                       </thead>
                       <tbody>
                           {this.showUserPosts(user)}
                       </tbody>
                   </table>
               </div>
            </div>
        )
    }
}

function mapStateToProps(state) {

    return {
        user_reducer: state.user_reducer
    }
}

export default connect(mapStateToProps)(UserPosts)