React redux在获取新数据之前显示以前的状态旧数据

React Redux 是一个用于管理应用程序状态的 JavaScript 库。它结合了 React 和 Redux，使得状态管理变得简单而强大。通过使用 React Redux，您可以将应用程序的状态存储在 Redux 存储中，并将其作为 props 传递给 React 组件，从而实现数据的共享和更新。

当需要获取新数据之前显示旧数据的状态时，可以通过在 Redux 存储中保留旧数据的方式来实现。以下是一种常见的实现方式：

定义 Redux 存储的状态结构：在 Redux 中，您可以通过定义存储的状态结构来管理应用程序的状态。例如，您可以使用一个包含数据的对象，其中包含一个字段用于存储旧数据和一个字段用于存储新数据。例如：

{
  oldData: {},
  newData: {}
}

创建 Redux 动作和操作：创建 Redux 动作和操作来更新存储中的数据。例如，可以创建一个动作来获取新数据并将其更新到存储中的 newData 字段中。

const FETCH_NEW_DATA_SUCCESS = 'FETCH_NEW_DATA_SUCCESS';

const fetchNewDataSuccess = (data) => ({
  type: FETCH_NEW_DATA_SUCCESS,
  payload: data
});

const fetchData = () => {
  return (dispatch) => {
    // 发起异步请求获取新数据
    api.fetchData()
      .then((response) => {
        dispatch(fetchNewDataSuccess(response.data));
      })
      .catch((error) => {
        // 处理错误
      });
  };
};

创建 Redux 的 reducer 函数：创建一个 reducer 函数来处理不同的动作类型并更新存储中的状态。在这个 reducer 函数中，可以根据动作类型来更新 newData 字段。

const initialState = {
  oldData: {},
  newData: {}
};

const dataReducer = (state = initialState, action) => {
  switch (action.type) {
    case FETCH_NEW_DATA_SUCCESS:
      return {
        ...state,
        oldData: state.newData, // 保留旧数据
        newData: action.payload // 更新为新数据
      };
    default:
      return state;
  }
};

将 Redux 存储与 React 组件连接：使用 React Redux 的 connect 函数将 Redux 存储中的状态和操作连接到需要访问和更新数据的 React 组件。通过将存储的数据作为组件的 props 传递，组件可以访问旧数据和新数据。

import { connect } from 'react-redux';

const YourComponent = ({ oldData, newData, fetchData }) => {
  // 渲染旧数据和新数据
  return (
    <div>
      <h1>旧数据：</h1>
      <p>{JSON.stringify(oldData)}</p>
      <h1>新数据：</h1>
      <p>{JSON.stringify(newData)}</p>
      <button onClick={fetchData}>获取新数据</button>
    </div>
  );
};

const mapStateToProps = (state) => ({
  oldData: state.oldData,
  newData: state.newData
});

const mapDispatchToProps = (dispatch) => ({
  fetchData: () => dispatch(fetchData())
});

export default connect(mapStateToProps, mapDispatchToProps)(YourComponent);

通过上述步骤，您可以在获取新数据之前显示以前的状态旧数据。在点击 "获取新数据" 按钮后，旧数据将会被保存在存储中的 oldData 字段中，并将新数据更新到 newData 字段中。组件通过连接到 Redux 存储来访问这些数据，并可以根据需要进行渲染和处理。

腾讯云提供了一些与 React Redux 相关的产品和服务，例如云函数 SCF（Serverless Cloud Function），可以用于处理后端逻辑；云开发 TCB（Tencent Cloud Base），提供了强大的云端托管能力和数据库服务；COS（Cloud Object Storage），提供了高可用、高扩展性的对象存储服务等等。您可以通过访问腾讯云的官方网站获取更详细的产品信息和文档：腾讯云。