掌握Redux-thunk和Axios：从异步请求到同步状态管理

前端

2023-11-26 17:34:44

前言

在现代 Web 开发中，异步请求和状态管理是两个非常重要的概念。异步请求允许我们向服务器发送请求并等待服务器的响应，而状态管理则允许我们管理应用程序的状态并将其与用户界面同步。

什么是 Redux-Thunk？

Redux-Thunk 是一个 Redux 中间件，它允许我们延迟 action 的派发。这使得我们可以处理异步 action，例如那些需要向服务器发送请求的 action。

什么是 Axios？

Axios 是一个基于 Promise 的 HTTP 客户库。它可以让我们轻松地发送异步请求并处理服务器的响应。

如何使用 Redux-Thunk 和 Axios 构建一个简单的 React 应用？

首先，我们需要安装 Redux-Thunk 和 Axios。我们可以使用以下命令来安装这两个库：

npm install --save redux-thunk axios

接下来，我们需要创建一个 Redux store。Redux store 是一个全局状态对象，它存储着应用程序的状态。我们可以使用以下代码来创建一个 Redux store：

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

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

然后，我们需要创建一个 React 组件来显示服务器端的数据。我们可以使用以下代码来创建一个 React 组件：

import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import axios from 'axios';

const App = () => {
  const dispatch = useDispatch();
  const data = useSelector(state => state.data);

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

  const fetchData = () => {
    return async (dispatch) => {
      const response = await axios.get('https://example.com/api/data');
      dispatch({ type: 'SET_DATA', payload: response.data });
    };
  };

  return (
    <div>
      {data.map((item) => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
};

export default App;

最后，我们需要在 React 应用中使用 Redux store。我们可以使用以下代码来在 React 应用中使用 Redux store：

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

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);