Question

我需要在更新呼叫过程中在UI中显示活动指示器。我正在使用react-redux更新/发布和获取数据

Answer 1

您需要调度一个动作，通常一个动作包含三个部分。 1.正在加载。 2.成功。 3.失败。当您分派操作时，它将触发“加载常数”，并且将触发进行网络调用的函数，并且您还将基于化简器将一些数据或标志从reducer返回到组件，例如“ isLoaing：true”。标记我们可以显示您的活动指示器，并在处理网络呼叫时获得数据或错误返回“ isLoaing：false”，并且活动指示器将在此基础上隐藏。

import { call, put, takeEvery } from 'redux-saga/effects'
import { AuthApi } from '../../Services/data/login'
import { FETCH_AUTH_LOADING, FETCH_AUTH_SUCCESS, FETCH_AUTH_FAIL } from'../../Redux/constants/Constants'

function authSuccess (payload) {
   return { type: FETCH_AUTH_SUCCESS, payload }
}

function authFail (payload) {
  return { type: FETCH_AUTH_FAIL, payload }
}

function * authRequest ({requestPayload}) {
  const url = 'Your URL'
  try {
    const resBody = yield call(AuthApi, {url, requestPayload})
    console.log('login api response :::', resBody)
    // let responseData
    if (resBody.ok) {
      yield put(authSuccess({loginData: resBody.data}))
    } else {
      yield put(authFail({ resBody }))
    }
  } catch (error) {
    yield put(authFail({ error }))
  }
}

export default function * authSaga (payload) {
  yield takeEvery(FETCH_AUTH_LOADING, authRequest)
}

和你的减速器会是这样。

const initialState = {
    isLoading: false,
}

export default function (state = initialState, action) {
  switch (action.type) {
    case FETCH_AUTH_SUCCESS:
      {
        return {
          ...state,
          isLoading: false,
        }
      } case FETCH_AUTH_LOADING:
      {
        return {
          ...state,
          isLoading: true,
          error: false
        }
      }
    case FETCH_AUTH_FAIL:
      return {
        ...state,
        isLoading: false,
        error: action.payload.error
      }
    default:
      return state
  }
}

如何使用redux在react-native中的POST / UPDATE调用之前显示活动指示器

1 个答案: