无法使用redux正确处理react中的状态“正在加载”

在React中，Redux是一个流行的状态管理库，用于管理应用程序的状态。当我们需要在React应用中处理“正在加载”状态时，可以使用Redux来管理该状态。

首先，我们需要安装Redux和React-Redux库。可以使用以下命令进行安装：

npm install redux react-redux

接下来，我们需要创建一个Redux store来存储应用程序的状态。在Redux中，store是一个包含整个应用程序状态的对象。我们可以使用Redux的createStore函数来创建store。以下是一个示例：

import { createStore } from 'redux';

// 定义初始状态
const initialState = {
  isLoading: false,
};

// 定义reducer函数
const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'SET_LOADING':
      return {
        ...state,
        isLoading: action.payload,
      };
    default:
      return state;
  }
};

// 创建store
const store = createStore(reducer);

在上面的示例中，我们定义了一个初始状态isLoading为false，并创建了一个reducer函数来处理状态的更新。当接收到SET_LOADING动作时，reducer会更新isLoading状态。

接下来，我们需要在React组件中使用Redux store。为此，我们可以使用React-Redux库提供的<Provider>组件将store传递给应用程序的根组件。以下是一个示例：

import React from 'react';
import { Provider } from 'react-redux';
import { store } from './store';

const App = () => {
  return (
    <Provider store={store}>
      {/* 应用程序的其他组件 */}
    </Provider>
  );
};

export default App;

现在，我们可以在其他React组件中使用Redux store中的状态。为了在组件中访问状态，我们可以使用React-Redux库提供的useSelector钩子函数。以下是一个示例：

import React from 'react';
import { useSelector } from 'react-redux';

const MyComponent = () => {
  const isLoading = useSelector(state => state.isLoading);

  return (
    <div>
      {isLoading ? '正在加载...' : '加载完成'}
    </div>
  );
};

export default MyComponent;

在上面的示例中，我们使用useSelector钩子函数从Redux store中选择isLoading状态，并根据其值显示不同的文本。

总结一下，使用Redux正确处理React中的“正在加载”状态的步骤如下：