Javascript 调用API时如何使用Redux设置装入组件

前言：我是新的反应

我正在创建一个基于React、Redux的项目

我想在按下

寄存器组件

上的

寄存器

按钮时设置加载状态

我做了很多研究寻找可能的解决方案，但没有找到任何对我的情况有用的东西

解决这个问题的最好方法是什么

寄存器减速机

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

function userReducer(state = initialState, action) {
  switch (action.type) {
    case 'FETCH_USERS_INIT':
      return {
        ...state,
        loading: true
      };
    case 'FETCH_USERS_SUCCESS':
      return {
        ...state,
        loading: false,
        error: null,
        users: action.payload.users
      };
    case 'FETCH_USERS_FAIL':
      return {
        ...state,
        loading: false,
        error: action.payload.error
      };
    default:
      return initialState;
  }
}

export default userReducer;

const initialState={
待定：错误，
用户：[]，
错误：null，
showModal：错，
加载：错误
}
导出函数userReducer（状态=初始状态，操作）{
开关（动作类型）{
案例“切换加载”：返回{
……国家，
正在加载：！state.loading
}
案例“用户添加”：
{
调试器；
state.users=state.users.concat（action.payload）；
返回{
……国家，
加载：false，
用户：state.users
}
}
案例获取\用户\挂起：
返回{
……国家，
待定：正确，
加载：错误
}
案例获取\用户\成功：
返回{
……国家，
待定：错误，
加载：false，
用户：action.payload
}
案例获取\用户\错误：
返回{
……国家，
待定：错误，
加载：false，
错误：action.error
}
违约：
返回状态；
}
}
导出默认userReducer；

注册操作

export const userRegisterFetch=user=>{
user.Username=user.Mobile；
返回调度=>{
分派（{type:'TOGGLE_LOAD'}）
返回fetch（`${baseUrl}/users/Register`，
{
方法：“POST”，正文：JSON.stringify（用户），标题：{
“内容类型”：“应用程序/json”，
}
}
)
.then（resp=>resp.json（））
。然后（数据=>{
if（data.result==未定义）{
返回警报（“错误”）；
}
如果（！data.result）{
警报（数据、消息）；
}
否则{
常数位置={
路径名：'/Users/Confirm'，
状态：{mobile:user.mobile}
}
历史。推送（位置）；
}
})
}
}

Register.js组件

const{loading}=this.props
返回(
{加载？：
…我的表格
}
)

老实说，我认为您只需要3个减缩器：FETCH\u USERS\u INIT、FETCH\u USERS\u SUCCESS和FETCH\u USERS\u FAIL

寄存器减速机

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

function userReducer(state = initialState, action) {
  switch (action.type) {
    case 'FETCH_USERS_INIT':
      return {
        ...state,
        loading: true
      };
    case 'FETCH_USERS_SUCCESS':
      return {
        ...state,
        loading: false,
        error: null,
        users: action.payload.users
      };
    case 'FETCH_USERS_FAIL':
      return {
        ...state,
        loading: false,
        error: action.payload.error
      };
    default:
      return initialState;
  }
}

export default userReducer;

这个动作还没有完成，但我认为如何完成它是很清楚的。如果你有任何疑问，请告诉我