异步 api 使用 redux thunk 获取

Question

我无法从 api 中获取用户列表。我认为问题可能出在我的 mapDispatchToProps 函数中，但我不确定。其他一切对我来说似乎都很好。我是 redux 的新手，我有点难以理解它所以感谢任何帮助

用户列表最好在安装组件后立即显示。我在没有 redux store 的情况下做了同样的事情，它工作得很好，我只是不确定如何集成 redux

操作

export const startLoading = () => {
    return {
        type: START_LOADING
    }
}
export const updateUserData = payload => {
    return {
        type: UPDATE_USER_DATA,
        payload
    }
}
export const updateUserError = payload => {
    return {
        type: UPDATE_USER_ERROR,
        payload: payload
    }
}

export function fetchUsers() {
    return dispatch => {
        dispatch(startLoading());
        fetch('https://jsonplaceholder.typicode.com/users')
            .then(res => res.json())
            .then(data => {
                data = data.filter(user => user.id < 4);
                data.forEach(user => {
                    user.isGoldClient = false;
                    user.salary = '4000';
                    user.photo = userThumbnail;
                })
                .then(data => {
                    dispatch(updateUserData(data));
                }).catch(error => {
                    dispatch(updateUserError(error));
                })
            });
    };
};

减速器

const initialState = {
    loading: false,
    users: [],
    error: null
};

export function userReducer(state=initialState, action){
    switch(action.type){
        case START_LOADING:
            return {
                ...state,
                loading: true
            }
        case UPDATE_USER_DATA:
            return {
                ...state,
                loading: false,
                users: action.payload,
                error: null
            }
        case UPDATE_USER_ERROR:
            return {
                ...state,
                error: action.payload,
                loading: false,
                users: []
            };
        default:
            return state;
    };
};

组件

class Home extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
        users: [],
        usersAreDisplayed: true
        };
    }
    componentDidMount() {
        fetchUsers();
    }
     
    render(){
        return (
             <UserList users={this.state.users} /> 
        )
    }
}

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

function mapDispatchToProps(dispatch){
    return {
        fetchUsers: payload => dispatch(updateUserData(payload)),
    }
}

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

Answer 1

您正在将 redux 状态映射到组件的 props。

因此您应该从组件的 props 而不是 state:

加载用户

    render(){
        return (
             <UserList users={this.props.users} /> 
        )
    }

Answer 2

看起来你根本没有调用实际的 fetchUsers。

像这样更改组件代码

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

// remove this function
// function mapDispatchToProps(dispatch){
//   return {
//       fetchUsers: payload => dispatch(updateUserData(payload)),
//   }
// }

export default connect(mapStateToProps, {fetchUsers})(Home); //<---- destructure it here. Also import the function (action)

1a。需要使用 this.props

访问 fetchUsers 函数

    componentDidMount() {
        this.props.fetchUsers();
    }

在forEach之后多了一个then块。 删除它。

export function fetchUsers() {
  return (dispatch) => {
    dispatch(startLoading());
    fetch("https://jsonplaceholder.typicode.com/users")
      .then((res) => res.json())
      .then((data) => {
        data = data.filter((user) => user.id < 4);
        data.forEach((user) => {
          user.isGoldClient = false;
          user.salary = "4000";
          user.photo = userThumbnail;
        });
        dispatch(updateUserData(data)); // <------ no extra .then is required
      })
      .catch((error) => {
        dispatch(updateUserError(error));
      });
  };
}

另外 <UserList users={this.state.users} /> 需要 <UserList users={this.props.users} /> 正如@Nsevens 已经提到的

异步 api 使用 redux thunk 获取

Async api fetch with redux thunk

javascript

asynchronous

reactjs

redux

redux-thunk