Redux中异步操作处理的具体实现

npm install redux-thunk

import { createStore, applyMiddleware } from 'redux';

import thunk from 'redux-thunk';

import rootReducer from './reducers';

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

function fetchData() {
  return async (dispatch) => {
    try {
      const response = await fetch('https://api.example.com/data');
      const data = await response.json();
      dispatch({ type: 'FETCH_SUCCESS', payload: data });
    } catch (error) {
      dispatch({ type: 'FETCH_ERROR', payload: error });
    }
  };
}

componentDidMount() {
  this.props.dispatch(fetchData());
}
 
// 或者使用hooks
useEffect(() => {
  props.dispatch(fetchData());
}, []);

npm install --save redux-saga

import { createStore, applyMiddleware } from 'redux';
import createSagaMiddleware from 'redux-saga';
import rootReducer from './reducers';
import rootSaga from './sagas';

const sagaMiddleware = createSagaMiddleware();
const store = createStore(rootReducer, applyMiddleware(sagaMiddleware));
sagaMiddleware.run(rootSaga);

import { takeEvery, put } from 'redux-saga/effects';
import axios from 'axios';

function* fetchPosts() {
  try {
    yield put({ type: 'FETCH_POSTS_REQUEST' });
    const response = yield axios.get('/posts');
    yield put({ type: 'FETCH_POSTS_SUCCESS', payload: response.data });
  } catch (error) {
    yield put({ type: 'FETCH_POSTS_FAILURE', payload: error.message });
  }
}

function* watchFetchPosts() {
  yield takeEvery('FETCH_POSTS', fetchPosts);
}

export default function* rootSaga() {
  yield [
    watchFetchPosts(),
    // ...
  ];
}

import { FETCH_POSTS } from './constants';

// ...

const mapDispatchToProps = dispatch => ({
  fetchPosts: () => dispatch({ type: FETCH_POSTS }),
});

export default connect(null, mapDispatchToProps)(MyComponent);