在react native / redux中处理异步请求

在React Native / Redux中处理异步请求，可以使用中间件来处理。Redux Thunk是一个常用的中间件，它允许我们在Redux中编写异步的action creator。

异步请求通常涉及到网络通信，可以使用Fetch API或Axios库来发送HTTP请求。这些库可以帮助我们发送GET、POST等类型的请求，并处理响应数据。

在React Native中，可以使用AsyncStorage来进行本地数据的存储和读取。它是一个简单的键值对存储系统，适用于存储小量的数据。

以下是一个处理异步请求的示例代码：

安装Redux Thunk和Axios库：

npm install redux-thunk axios

创建一个异步action creator：

import axios from 'axios';

export const fetchPosts = () => {
  return async (dispatch) => {
    dispatch({ type: 'FETCH_POSTS_REQUEST' });

    try {
      const response = await axios.get('https://api.example.com/posts');
      dispatch({ type: 'FETCH_POSTS_SUCCESS', payload: response.data });
    } catch (error) {
      dispatch({ type: 'FETCH_POSTS_FAILURE', payload: error.message });
    }
  };
};

在Redux中应用Redux Thunk中间件：

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const store = createStore(rootReducer, applyMiddleware(thunk));

在组件中使用异步action creator：

import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { fetchPosts } from './actions';

const PostList = () => {
  const dispatch = useDispatch();
  const posts = useSelector((state) => state.posts);

  useEffect(() => {
    dispatch(fetchPosts());
  }, []);

  return (
    <div>
      {posts.loading ? (
        <p>Loading...</p>
      ) : posts.error ? (
        <p>Error: {posts.error}</p>
      ) : (
        <ul>
          {posts.data.map((post) => (
            <li key={post.id}>{post.title}</li>
          ))}
        </ul>
      )}
    </div>
  );
};

export default PostList;

在上述示例中，fetchPosts是一个异步action creator，它发送GET请求获取帖子数据。在组件中使用useEffect钩子来触发fetchPosts，并使用useSelector从Redux store中获取帖子数据。根据请求状态，显示不同的UI内容。

推荐的腾讯云相关产品：腾讯云云开发（https://cloud.tencent.com/product/tcb）提供了云函数、数据库、存储等服务，适用于React Native / Redux中处理异步请求的后端支持。