在react-redux中每隔3秒调用一个api

在react-redux中，可以使用定时器来每隔3秒调用一个API。以下是一个实现的示例：

首先，安装必要的依赖：

npm install react-redux redux-thunk axios

然后，在Redux中创建一个action来调用API：

// actions.js
import axios from 'axios';

export const fetchData = () => {
  return async (dispatch) => {
    try {
      const response = await axios.get('https://api.example.com/data');
      dispatch({ type: 'FETCH_DATA_SUCCESS', payload: response.data });
    } catch (error) {
      dispatch({ type: 'FETCH_DATA_FAILURE', payload: error.message });
    }
  };
};

接下来，在Redux中创建一个reducer来处理API调用的状态：

// reducer.js
const initialState = {
  data: null,
  error: null,
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'FETCH_DATA_SUCCESS':
      return { ...state, data: action.payload, error: null };
    case 'FETCH_DATA_FAILURE':
      return { ...state, data: null, error: action.payload };
    default:
      return state;
  }
};

export default reducer;

然后，在React组件中使用react-redux来调用API并更新状态：

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

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

  useEffect(() => {
    const interval = setInterval(() => {
      dispatch(fetchData());
    }, 3000);

    return () => {
      clearInterval(interval);
    };
  }, [dispatch]);

  return (
    <div>
      {data && <p>Data: {data}</p>}
      {error && <p>Error: {error}</p>}
    </div>
  );
};

export default MyComponent;

最后，在应用的根组件中使用redux和react-redux提供的Provider来包裹整个应用：

// App.js
import React from 'react';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import reducer from './reducer';
import MyComponent from './MyComponent';

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

const App = () => {
  return (
    <Provider store={store}>
      <MyComponent />
    </Provider>
  );
};

export default App;

这样，每隔3秒钟，API将被调用一次，并且数据将被更新到Redux的状态中。你可以根据实际需求修改API的URL和Redux的状态处理逻辑。

腾讯云相关产品和产品介绍链接地址：