将Redux异步操作变成轻而易举的事——Redux-effect，我用它来进行开发！

2023-12-18 23:59:16

Redux-effect概述

Redux-effect是基于Redux、async/await的异步状态管理器。它将Redux异步操作变得轻而易举，同时还兼容其他Redux插件，轻松整合进老项目。

Redux-effect的特点

简单易用： Redux-effect使用起来非常简单，只需要几行代码就可以完成异步操作。
兼容性强： Redux-effect兼容其他Redux插件，因此可以轻松整合进老项目中。
性能优越： Redux-effect使用async/await来处理异步操作，因此性能非常优越。

Redux-effect的使用方法

安装

npm install redux-effect --save

使用

import { createStore, applyMiddleware } from 'redux';
import { createEffectMiddleware } from 'redux-effect';
import rootReducer from './reducers';

const effectMiddleware = createEffectMiddleware();

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

定义异步操作

const fetchUser = async (id) => {
  const response = await fetch(`/users/${id}`);
  return response.json();
};

使用异步操作

store.dispatch({
  type: 'FETCH_USER',
  payload: {
    id: 123
  }
});

异步操作的处理

effectMiddleware.addEffects({
  FETCH_USER: async (action) => {
    const user = await fetchUser(action.payload.id);
    store.dispatch({
      type: 'USER_FETCHED',
      payload: {
        user
      }
    });
  }
});