现在有很多人在谈论redux城的最新成员,redux-saga/redux-saga。它使用生成器函数来监听/分派动作。

在我把我的脑袋绕在它周围之前,我想知道使用redux-saga的优点/缺点,而不是下面的方法,我使用redux-thunk与async/await。

组件可能是这样的,像往常一样分派动作。

import { login } from 'redux/auth';

class LoginForm extends Component {

  onClick(e) {
    e.preventDefault();
    const { user, pass } = this.refs;
    this.props.dispatch(login(user.value, pass.value));
  }

  render() {
    return (<div>
        <input type="text" ref="user" />
        <input type="password" ref="pass" />
        <button onClick={::this.onClick}>Sign In</button>
    </div>);
  } 
}

export default connect((state) => ({}))(LoginForm);

然后我的动作看起来像这样:

// auth.js

import request from 'axios';
import { loadUserData } from './user';

// define constants
// define initial state
// export default reducer

export const login = (user, pass) => async (dispatch) => {
    try {
        dispatch({ type: LOGIN_REQUEST });
        let { data } = await request.post('/login', { user, pass });
        await dispatch(loadUserData(data.uid));
        dispatch({ type: LOGIN_SUCCESS, data });
    } catch(error) {
        dispatch({ type: LOGIN_ERROR, error });
    }
}

// more actions...

// user.js

import request from 'axios';

// define constants
// define initial state
// export default reducer

export const loadUserData = (uid) => async (dispatch) => {
    try {
        dispatch({ type: USERDATA_REQUEST });
        let { data } = await request.get(`/users/${uid}`);
        dispatch({ type: USERDATA_SUCCESS, data });
    } catch(error) {
        dispatch({ type: USERDATA_ERROR, error });
    }
}

// more actions...

当前回答

为了给这个答案一些上下文:嗨,我是Redux维护者。

我们最近在Redux文档中添加了一个新的Side Effects methods页面,它将提供关于所有这些内容的许多信息,但我将尝试在这里写一些简短的内容,因为这个问题得到了大量的曝光。

在2022年,我们将监听器中间件添加到官方Redux工具包中,用于“响应式Redux逻辑”。它可以做sagas可以做的大部分事情(例外是通道),而不需要生成器语法和更好的TypeScript支持。 但这并不意味着你应该用侦听器中间件来编写所有的东西——我们建议在可能的情况下总是先使用thks,在thks不能做你想做的事情时再使用侦听器中间件。

一般来说,我们在2023年的立场是,只有当你有其他中间件无法满足的特定需求时,你才应该使用saga。(本质上:如果你需要频道。)

我们的建议是:

数据抓取

使用RTK Query作为数据获取和缓存的默认方法 如果RTKQ不完全适合,使用createAsyncThunk 只有在其他方法都没用的情况下,才会求助于手写的感谢信 不要使用saga或可观察对象来获取数据!

对动作/状态变化做出反应,异步工作流

使用RTK监听器作为默认响应存储更新和编写长时间运行的异步工作流 只有当监听器不能很好地解决你的用例时,才使用saga / observable

带有状态访问的逻辑

对于复杂的同步和适度的异步逻辑,包括对getState的访问和调度多个操作,可以使用坦克

其他回答

坦克大战萨加斯

Redux- thunk和Redux- saga在一些重要的方面有所不同,它们都是Redux的中间件库(Redux中间件是通过dispatch()方法拦截进入商店的操作的代码)。

一个动作可以是任何东西,但是如果您遵循最佳实践,那么一个动作就是一个简单的javascript对象,其中包含一个类型字段,以及可选的有效负载、元和错误字段。如。

const loginRequest = {
    type: 'LOGIN_REQUEST',
    payload: {
        name: 'admin',
        password: '123',
    }, };

Redux-Thunk

除了分派标准的动作,redux -坦克中间件还允许你分派特殊的函数,称为坦克。

坦克(在Redux中)通常有以下结构:

export const thunkName =
   parameters =>
        (dispatch, getState) => {
            // Your application logic goes here
        };

也就是说,一个thunk是一个(可选的)接受一些参数并返回另一个函数的函数。内部函数接受一个分派函数和一个getState函数——这两个函数都将由Redux-Thunk中间件提供。

Redux-Saga

Redux-Saga中间件允许您将复杂的应用程序逻辑表示为称为saga的纯函数。从测试的角度来看,纯函数是可取的,因为它们是可预测和可重复的,这使得它们相对容易测试。

saga是通过称为生成器函数的特殊函数实现的。这些是ES6 JavaScript的新特性。基本上,在任何看到yield语句的地方,执行都会在生成器中跳跃。将yield语句看作是导致生成器暂停并返回yield值的语句。稍后,调用者可以在yield之后的语句处恢复生成器。

生成器函数是这样定义的。注意function关键字后面的星号。

function* mySaga() {
    // ...
}

一旦登录传奇注册到Redux-Saga。但是在第一行上的yield take将暂停saga,直到带有“LOGIN_REQUEST”类型的操作被分派到商店。一旦发生这种情况,执行将继续进行。

欲了解更多细节,请参阅本文。

一个小提示。生成器是可取消的,async/await - not。 举个例子,选什么并没有什么意义。 但对于更复杂的流,有时没有比使用生成器更好的解决方案了。

所以,另一个想法可能是使用带有还原坦克的发电机,但对我来说,这就像试图发明一辆有方轮子的自行车。

当然,生成器更容易测试。

在我回顾了一些不同的大型React/Redux项目的经验后,Sagas为开发人员提供了一种更结构化的代码编写方式,更容易测试,也更不易出错。

是的,刚开始这有点奇怪,但大多数开发者在一天之内就足够理解它了。我总是告诉人们不要担心yield一开始会做什么,一旦你写了几个测试,它就会来找你。

我曾经见过一些项目,在这些项目中,坦克被当作MVC模式的控制器来处理,这很快就变成了一个不可维护的混乱。

我的建议是,当你需要A触发B类型的与单个事件相关的东西时使用saga。对于任何可能跨越许多操作的东西,我发现编写自定义中间件并使用FSA操作的元属性来触发它更简单。

更简单的方法是使用redux-auto。

来自文献传播

Redux-auto通过允许您创建一个返回承诺的“action”函数来修复这个异步问题。以配合您的“默认”函数动作逻辑。

不需要其他Redux异步中间件。例如,thunk, promise-middleware, saga 轻松地允许您传递到redux承诺,并为您管理它 允许您将外部服务调用与它们将被转换的位置放在一起 将文件命名为“init.js”将在应用启动时调用它一次。这有利于在启动时从服务器加载数据

其思想是将每个操作放在一个特定的文件中。在文件中将服务器调用与“pending”、“completed”和“rejected”的reducer函数放在一起。这使得处理承诺非常容易。

它还自动将一个helper对象(称为“async”)附加到您的状态原型上,允许您在UI中跟踪请求的转换。

这是一个结合了redux-saga和redux-thunk最好的部分(优点)的项目:你可以处理所有的副作用,同时通过调度相应的行动获得承诺: https://github.com/diegohaz/redux-saga-thunk

class MyComponent extends React.Component {
  componentWillMount() {
    // `doSomething` dispatches an action which is handled by some saga
    this.props.doSomething().then((detail) => {
      console.log('Yaay!', detail)
    }).catch((error) => {
      console.log('Oops!', error)
    })
  }
}