在 Redux 应用程序中哪里可以找到长时间运行的进程
介绍
Redux 在管理应用程序的复杂状态和将代码划分为逻辑结构方面与 React 相得益彰。使用 React 的大型企业正在广泛使用 Redux 来构建可扩展的 Web 应用程序。
随着您的应用随着时间的推移而增长，它会与更多外部服务进行通信、实现复杂的功能并在功能方面多样化。 所有这些都构成了您应用的长期运行进程。 扩展 React+Redux 应用的理想方法是构建这些进程，以便可以在不对您的架构进行重大更改的情况下重复使用它们。 本指南讨论了某些方法，可以帮助您了解在 React+Redux 应用中将管理业务逻辑的长期运行进程放在哪里。
将动作与动作创建器结合使用
调度操作是使用 Redux 时的关键概念之一。您的重点应该是调度尽可能多的操作，然后使用操作创建器重构它们。应用程序中的大多数业务逻辑都围绕与后端 API 的通信。操作创建器不仅可以减少代码冗余，而且您还可以在其中执行大部分工作。这样，当您的应用程序需求随着时间的推移而增长时，您可以使用相同的操作创建器以不同的方式调度操作。例如，考虑以下虚拟代码，它从 React 组件发出GET请求以获取用户登录时的信息。
axios.get(`https://backend/user/${user_id}`)
.then(res=>{
console.log(res.data)
if(res.data.success)
dispatch({
type:'SET_USER',
payload:{
user_type:res.data.user_type
}
})
})
.catch(err=>{
console.log(err)
})
您可以在 Web 应用上注册用户时使用相同的操作。
export const SET_USER='SET_USER';
重构上述代码，如下所示。
...
dispatch({
type:SET_USER,
payload:{
user_type:res.data.user_type
}
})
...
使用 Reducers
下一种可帮助您直接管理全局状态的方法是将工作集中在 Reducer 中。由于 Reducer 可以直接与状态同步交互，因此您可以方便地在全局和组件级别调用组件或更改状态。例如，考虑以下代码：
const Users = (state = [], action) => {
switch (action.type) {
case 'AUTHENTICATE_USER':
return [
...state,
{
user_id: action.payload.user_id,
message: "Success",
error: false
}
]
case 'ROLL_BACK':
return [
...state,
{
user_id: null,
message: "Wrong Credentials",
error: true
}
]
default:
return state
}
}
export default Users
您有一个 Reducer，Users，它会触发一个操作并处理用户登录时的处理方式。您可以使用这种方法构建一个可扩展的 Reducer 模型，方法是将多个操作分组到 Reducer 中。例如，如果您的应用的用户群多样化，您可以在 Reducer 中处理与不同类型用户相关的不同逻辑。这种方法很轻松，但在您需要执行异步操作时会中断。
使用中间件
Redux 为您提供了各种可立即使用的中间件。这些中间件在您的 Redux 应用中执行异步任务，您可以使用它们来利用承诺或操作创建器。由于任何大型应用程序都严重依赖异步操作，例如向服务器发送数据、从服务器检索数据或进行删除调用等，因此在应用程序早期使用中间件可以帮助您探索如何随着应用程序随着时间的推移变得复杂而实现与商店的异步交互。Thunk就是这样一种中间件，您可以通过库Redux-Thunk使用它。它具有简单的代码，可以在处理异步操作时方便地访问您的商店。例如，考虑以下代码：
export const getUser=()=>async (dispatch,getState)=>{
const newUser=await fetchUser()
dispatch({
type:'GET_USER',
payload: newUser
})
}
假设您有一个在fetchUser()函数内使用的后端服务。使用 Thunk，您可以从该函数返回一个承诺，并在请求成功后使用async和await调度操作。您也可以使用相同的逻辑进行错误处理。例如，您可以构建一个通用服务来从后端抛出异常。无论您的应用与服务器的通信类型如何，您都可以调用相同的服务。当您使用更多后端服务时，这可以帮助您节省大量冗余的错误处理代码。
其他替代方案
Redux-Saga
Redux-Saga是一个类似于 Thunk 的库，可帮助您使用 ES6生成器管理异步操作。JavaScript 中的生成器是函数和迭代器的组合。对于 Redux 应用程序中的长期运行过程，使用生成器可以帮助您解决性能问题，同时仍会用更多代码淹没它。这个库的唯一缺点是学习难度高。
史诗
Epics是redux-observables库的一个原语，它使用不同的方法，将重点放在围绕操作的流程上。它使用RxJS Observables来处理异步操作。它看起来和工作起来都像一个简单的函数，它接受一个操作并发出一个操作。Epics 在进行 API 调用时会从代码中过滤掉不必要的内容。事实证明，Observables 在实现依赖于后端服务（如自动建议和自动完成）的功能方面非常强大。它的学习曲线也很陡峭，尤其是对于不太熟悉 Observables 的开发人员来说。
Redux 循环
Redux-Loop是一个中间件，它挂接到你的 Reducer 上以执行副作用并分派最终结果。使用这个库最好的部分是它提供了非常干净的代码，这是每个开发人员都喜欢的。唯一的缺点是 Reducer 现在返回的不仅仅是状态，从而增加了复杂性。
实现自定义中间件
自定义中间件在战略上非常适合在较长时间内扩展 Web 应用。根据应用的当前和预期需求，您可以创建中间件，以完全按照您想要的方式执行所有必要的操作，例如拦截操作、处理异步操作、调度结果等。这是一种很好的方式，可以根据您的架构按照定义的模式构建您的应用。但是，如果您不想花费数小时调试和重构代码，那么您对实现自定义中间件的了解应该很充分。
结论
了解长时间运行的进程所在的位置有助于您为应用的前端开发强大且可扩展的架构。这些进程会影响用户体验和应用的性能，并决定您能否轻松地集成新功能和服务以随时间扩展应用。本指南中讨论的方法可让您开发可方便升级的功能或模块，以满足随时间推移的更广泛需求。
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~