使用 redux thunk 获取异步 api

Question

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

理想情况下，用户列表会在组件安装后立即显示。我在没有 redux 商店的情况下做了同样的事情，它工作得很好，我只是不确定如何集成 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

1. 看起来您根本没有调用实际的 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。 fetchUsers 函数需要使用this.props访问

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

1. 在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));
      });
  };
}

1. <UserList users={this.state.users} /> 也必须是 <UserList users={this.props.users} /> @Nsevens 已经提到过