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

npm install react-redux redux-thunk axios

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

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

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

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