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

{
  oldData: {},
  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) => {
        // 处理错误
      });
  };
};

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;
  }
};

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);