正文 

当前位置： 首页 > 问答 >

我在 react-native 和 redux 中处理 API 调用的地方

     2023-02-22     172

关键词：

【中文标题】我在 react-native 和 redux 中处理 API 调用的地方【英文标题】：Where I handle API calls in react-native and redux 【发布时间】：2016-11-08 11:04:40 【问题描述】：

我正在使用 react-native + redux + immutable 构建一个 Android 应用程序

我的应用是这样构建的

/src
 -/components
 -/actions (where I have action types and actions)
 -/reducers
 -/api (I'm not sure if I'm doing this right)

好的，所以我有一个操作需要使用 fetch 进行 API 调用，如下所示：

import * as types from './casesTypes'

export function getCases() 
    return 
      type: types.GET_CASES

这是case reducer：

const initialState = fromJS(
  isLoading: false,
  cases: null
)
export default function cases(state = initialState, action = ) 

    switch(action.type) 

        case types.REQUEST_CASES:
          return state.set('isLoading', true)

        case types.RECIVE
          return state.set('cases', //set here the array that I recive from api call)

        default:
          return state

所以，问题是我真的不明白，我应该在哪里进行 API 调用，以便在 reducer 中我可以将我的初始状态与我从 API 调用中收到的内容合并？

【问题讨论】：

【参考方案1】：

您的应用程序结构合理。

我还推荐使用 redux-thunk 来处理调度。以下是它在您的情况下的工作方式：

假设您的状态树中有“案例”。 我会按照您的建议将 API 调用放入您的操作中以获取新案例：

import * as types from './casesTypes'

export function getCases() 
    return fetch(...)
             ...
             .then((json) => 
               dispatch(         
                 type: types.RECEIVED_CASES,
                 isLoading: false,
                 cases: json,

现在在你的 reducer 中，只需获取新调度的操作即可将新案例与状态树合并：

const initialState = fromJS(
  isLoading: false,
  cases: null
)

export default function cases(state = initialState, action = ) 

    switch(action.type) 

        case types.REQUEST_CASES:
          return state.set('isLoading', true)

        case types.RECEIVED_CASES:
          return Object.assign(, state, 
            cases: state.cases.merge(action.cases),
          );

        default:
          return state

我目前正在使用这种结构，并且效果很好。希望对您有所帮助！

【讨论】：

【参考方案2】：

您应该尝试redux-thunk 或redux-saga，它们是为处理异步操作（如进行 API 调用）而创建的 redux 中间件。

查看这个使用 redux-thunk 的项目：sound-redux-native

【讨论】：

我无法在带有 redux 的 react-native 中使用地理定位

】我无法在带有redux的react-native中使用地理定位【英文标题】：Iamunabletousegeolocationinreact-nativewithredux【发布时间】：2019-02-1305:39:34【问题描述】：我在带有redux的react-native中使用地理定位，但我遇到了2个问题..在我的androidstudio模... 查看详情

在 React-native 中使用 Redux Toolkit 持久化存储

】在React-native中使用ReduxToolkit持久化存储【英文标题】：PersiststorewithReduxToolkitinReact-native【发布时间】：2020-09-2109:37:25【问题描述】：我正在使用redux-persist和redux工具包。这是我的商店配置。我之前没有实施或配置过商店。我打... 查看详情

Redux 与 React-Native 和 mapStateToProps

】Redux与React-Native和mapStateToProps【英文标题】：ReduxwithReact-NativeandmapStateToProps【发布时间】：2017-05-1705:25:48【问题描述】：我读过这个帖子。WhatisthedifferencebetweenstateandpropsinReact?它说props与state不同，理想情况下props不应在其组件... 查看详情

我在反应本机应用程序中使用 redux 来获取和显示数据，但它没有更新来自后端的数据更改

...end【发布时间】：2020-06-0202:08:20【问题描述】：我在我的React-Native应用程序中使用Redux。我正在从api调用中获 查看详情

如何在 App.js (React-Native) 中访问 redux 状态

】如何在App.js(React-Native)中访问redux状态【英文标题】：HowtoaccessreduxstateinApp.js(React-Native)【发布时间】：2020-10-0707:25:36【问题描述】：我是reactnative和redux的初学者，并且是第一次使用它。我不确定如何在App.js文件中使用store.getSta... 查看详情

路由器状态没有通过 redux 保持在 react-native

】路由器状态没有通过redux保持在react-native【英文标题】：Routerstatenotbeingpersistedinreact-nativewithredux【发布时间】：2017-01-2410:28:24【问题描述】：我在react-native中有以下redux配置，使用react-native-router-flux和redux-persist。我想在刷新时... 查看详情

React-Native Redux reducer switch 语句忽略类型

】React-NativeReduxreducerswitch语句忽略类型【英文标题】：React-NativeReduxreducerswitchstatementignorestype【发布时间】：2020-04-1319:44:27【问题描述】：这真的让我很困惑。我在我的react-native应用程序中创建了一个减速器和一个动作。但是redu... 查看详情

在react-native中使用redux(代码片段)

redux是什么?redux是一个用于管理js应用状态的容器。redux出现时间并不是很长，在它出现之前也有类似功能的模块出现，诸如flux等等。redux设计的理念很简单，似乎最初这个开发团队就有让redux可以方便融入在server,browser,mobileclient... 查看详情

Redux 和 React-Native：无法读取未定义的属性“类型”

】Redux和React-Native：无法读取未定义的属性“类型”【英文标题】：ReduxandReact-Naitve:Cannotreadproperty\'type\'ofundefined【发布时间】：2019-03-1016:34:41【问题描述】：我正在尝试在我的第一个react-native应用程序中设置鸭子和传奇。但是每... 查看详情

React-native 和 Redux 健康的方式来调用 props 更改的操作

】React-native和Redux健康的方式来调用props更改的操作【英文标题】：React-nativeandReduxhealthywaytocallactionsonpropschange【发布时间】：2019-03-0723:17:53【问题描述】：我一直在使用react-native和redux有一段时间了，当道具发生变化时我学会调... 查看详情

使用 redux 在 react-native 应用程序中保存访问令牌的最佳实践是啥？

】使用redux在react-native应用程序中保存访问令牌的最佳实践是啥？【英文标题】：Whatisthebestpracticetosaveaccesstokeninreact-nativeappwithredux?使用redux在react-native应用程序中保存访问令牌的最佳实践是什么？【发布时间】：2018-01-1302:58:12【... 查看详情

Redux-thunk 异步调用和状态

...2311:08:52【问题描述】：我想知道我是否正确理解了React或React-Native中Redux-thunk异步操作的模式，以及我们如何对操作状态进行用户反馈。我觉得要么我不理解这个模式，要么还有其他谜题。因此，在我的React-native应用程序中（但... 查看详情

如何使用 redux 让根组件在 react-native 中重新渲染（开源项目）

】如何使用redux让根组件在react-native中重新渲染（开源项目）【英文标题】：Howtogetrootcomponenttore-renderinreact-nativewithredux(Opensourceproject)【发布时间】：2018-09-1311:52:47【问题描述】：在使用redux时，如何让React-Native(Expo.io)中的根组件... 查看详情

如何在reducer中专门使用redux来获取react-native中的API？

】如何在reducer中专门使用redux来获取react-native中的API？【英文标题】：HowtofetchAPIinreact-nativespeciallyusingreduxinthereducer?【发布时间】：2019-09-2323:19:44【问题描述】：如果我们在手机中使用数据来操作或显示，ReactNative状态是常用的... 查看详情

如何在react-native中优雅的使用redux

首先说下我对redux的理解吧,第一印象很重要就像妹纸一样.一句话来说他就是一个js的应用状态容器.说长点就是当你的应用足够复杂,交互足够多的时候,你不方便管理你的state,那么交给redux吧,他是一个单向数据流,高效且清晰.那么... 查看详情

React-Native with Redux：API 对象出现在我的 console.log 中，但不在我的视图中

】React-NativewithRedux：API对象出现在我的console.log中，但不在我的视图中【英文标题】：React-NativewithRedux:APIobjectsappearinmyconsole.logbutnotmyview【发布时间】：2016-06-2505:41:27【问题描述】：我正在使用react、react-native、react-native-router-flux... 查看详情

导入“react-redux”和“redux”时出错，同时使用 PC 中的小吃.expo.io 网站和 android 中的 expo 应用程序运行 react-native 应用程序

...时使用PC中的小吃.expo.io网站和android中的expo应用程序运行react-native应用程序【英文标题】：Errorimporting\'react-redux\'and\'redux\',whilerunningreact-nativeappusingsnack.expo.iowebsiteinPCandexpoappinandroid【发布时间】：2018- 查看详情

使用 react-redux 与 react-native 连接时的不变违规

】使用react-redux与react-native连接时的不变违规【英文标题】：InvariantViolationwhenusingreact-reduxconnectwithreact-native【发布时间】：2019-09-0921:53:40【问题描述】：我开始构建一个react-native应用程序，我想在其中添加redux。我已经多次使用r... 查看详情