如何使用Redux Toolkit简化Redux

2022-07-24,,,

了解redux toolkit,这是用于高效redux开发的经过验证的工具集。在本文中,你将看到为什么redux toolkit值得react社区更多的关注。

react和redux被认为是大规模react应用中管理状态的最佳组合。然而,随着时间的推移,redux的受欢迎程度下降,原因是:

  • 配置redux store并不简单。
  • 我们需要几个软件包来使redux与react一起工作。
  • redux需要太多样板代码。

带着这些问题,redux的创建者dan abramov发表了名为《你可能不需要redux》的文章,建议人们只在需要的时候使用redux,而在开发不那么复杂的应用时,要遵循其他方法。

redux toolkit解决的问题

redux toolkit(之前称为redux starter kit)提供了一些选项来配置全局store,并通过尽可能地抽象redux api来更精简地创建动作和reducers。

它包括什么?

redux toolkit附带了一些有用的软件包,例如immer,redux-thunk和reselect。它使react开发人员的工作变得更加轻松,允许他们直接更改状态(不处理不可变性),并应用thunk之类的中间件(处理异步操作)。它还使用了redux的一个简单的“选择器”库reselect来简化reducer函数。

redux toolkit api的主要功能?

以下是redux took kit使用的api函数,它是现有redux api函数的抽象。这些函数并没有改变redux的流程,只是以更易读和管理的方式简化了它们。

  • configurestore:像从redux中创建原始的createstore一样创建一个redux store实例,但接受一个命名的选项对象并自动设置redux devtools扩展。
  • createaction:接受一个action类型字符串,并返回一个使用该类型的action创建函数。
  • createreducer:接受初始状态值和action类型的查找表到reducer函数,并创建一个处理所有action类型的reducer。
  • createslice:接受一个初始状态和一个带有reducer名称和函数的查找表,并自动生成action creator函数、action类型字符串和一个reducer函数。

您可以使用上述api简化redux中的样板代码,尤其是使用createaction和createreducer方法。然而,这可以使用createslice进一步简化,它可以自动生成action creator和reducer函数。

createslice有什么特别之处?

它是一个生成存储片的助手函数。它接受片的名称、初始状态和reducer函数来返回reducer、action类型和action creators。

首先,让我们看看在传统的react-redux应用程序中reducers和actions的样子。

actions

reducers

现在,让我们看看如何使用createslice简化并实现相同的功能。

正如你所看到的,现在所有的动作和reducer都在一个简单的地方,而在传统的redux应用中,你需要在reducer中管理每一个action和它对应的action,当使用createslice时,你不需要使用开关来识别action。

当涉及到突变状态时,一个典型的redux流程会抛出错误,你将需要特殊的javascript策略,如spread operator和object assign来克服它们。由于redux toolkit使用immer,因此您不必担心会改变状态。由于slice创建了actions和reducers,你可以导出它们,并在你的组件和store中使用它们来配置redux,而无需为actions和reducers建立单独的文件和目录,如下所示。

这个存储可以通过使用useselector和usedispatch的redux api直接从组件中使用。请注意,您不必使用任何常量来标识操作或使用任何类型。

处理异步redux流

为了处理异步动作,redux toolkit提供了一个特殊的api方法,称为createasyncthunk,它接受一个字符串标识符和一个payload创建者回调,执行实际的异步逻辑,并返回一个promise,该promise将根据你返回的promise处理相关动作的调度,以及你的reducers中可以处理的action类型。

与传统的数据流不同,由createasyncthunk处理的action将由分片内的extrareducers部分处理。

请注意,在extrareducers内部,您可以处理已解决(fulfilled)和已拒绝(rejected)状态。

通过这些代码片段,您可以看到此工具包在redux中简化代码的效果如何。我创建了一个利用redux toolkit的rest示例供您参考。

最后的想法

根据我的经验,当开始使用redux时,redux toolkit是一个很好的选择。它简化了代码,并通过减少模板代码来帮助管理redux状态。

最后,就像redux一样,redux toolkit并非仅为react构建。我们可以将其与其他任何框架(例如angular)一起使用。

您可以通过参考redux toolkit的文档找到更多信息。

谢谢您的阅读!

以上就是如何使用redux toolkit简化redux的详细内容,更多关于使用redux toolkit简化redux的资料请关注其它相关文章!

《如何使用Redux Toolkit简化Redux.doc》

下载本文的Word格式文档,以方便收藏与打印。