我正在使用React + Flux。我们的团队计划从Flux转移到Redux。Redux对于来自Flux世界的我来说非常混乱。在Flux中,控制流程是简单的,从组件-〉操作-〉存储和存储更新回组件。它简单而非常清楚。
但是在redux中,它让人困惑。这里没有存储,是的,有一些例子没有使用存储。我看了几个教程,似乎每个人都有自己的实现风格。有些人使用容器,有些人没有。(我不知道这个容器的概念,也不能理解mapStateToProps,mapDispatchToProps做什么)。
1.有人能清楚地解释一下redux中的控制流是如何发生的吗?
- redux中组件/容器/动作/动作创建者/存储的角色是什么?
- redux/react-redux/redux-thunk/任何其他类型之间的区别?
1.如果你能发布任何简单而精确的redux教程的链接,这将是非常有帮助的。
6条答案
按热度按时间x6yk4ghg1#
1.有人能清楚地解释一下redux中的控制流是如何发生的吗?
Redux(总是)有一个单一的商店。
1.无论何时要替换存储中的状态,都可以调度一个操作。
1.该动作由一个或多个还原器捕获。
1.商店订阅者将收到通知,告知有一个新状态。
请注意,容器/智能组件与哑组件只是构建应用的一种好方法。
useSelector()
和useStore()
来从存储中获取数据,以及useDispatch()
来调度操作。您还可以使用connect()
函数来创建HoC(高阶组件),它们侦听存储的状态变化,为 Package 的组件准备 prop ,并在状态变化时重新呈现 Package 的组件。1.如果你能发布任何简单而精确的redux教程的链接,那将是非常有帮助的。
eulz3vhy2#
要回答标题问题:
还原、React还原、还原形实感之间的区别是什么?
1.还原形thunk:一个redux中间件,它可以帮助你进行异步操作
1.React-还原:将redux存储与ReactComponents连接
jv4diomz3#
62lalag44#
在我看来,Redux对于第一次学习这个库还是有点困惑,需要一些时间来理解和开始使用它。即使你使用Redux Toolkit -最新的库(来自Redux作者)-它也有一些棘手的时刻,可能从一开始就不清楚。
我用的是Master-Hook。
Redux、react-redux、redux-thunk和reselect已经安装在库中,您需要按照以下步骤操作。
第一步:创建“src/hooks.js”文件
创建组件并将其导出(useMyHook)设置初始状态(initialState:...)设置值需要保持缓存的时间(ms)(cache:...)
第2步:将提供程序添加到src/index.js
第3步:在src/App.js中使用钩子
使用MyHook导入钩子
宣布你的钩子
在代码中使用它
以及
删除href属性以防止其更改页面。setMyName操作将自动创建。
不需要连接到商店。它已经连接。
第4步:运行项目!
就是这样:)
c90pui9n5#
Redux thunk是一个中间件,它监视或观察通过系统的任何分派操作。
ryhaxcpt6#
下图演示了redux中的数据流:how the data flows through Redux? Redux的优势如下所示:
结果的可预测性-由于总是存在一个真实来源,即存储,因此不会混淆如何将当前状态与应用程序的动作和其他部分同步。可维护性-代码变得更易于维护,具有可预测的结果和严格的结构。服务器端呈现-您只需要传递在服务器上创建的存储,到客户端。这对于初始呈现非常有用,并在优化应用程序性能时提供更好的用户体验。开发人员工具-从操作到状态更改,开发人员可以实时跟踪应用程序中发生的所有事情。社区和生态系统- Redux背后有一个庞大的社区,这使得它更易于使用。一个由有才华的个人组成的大型社区为改进库做出了贡献,并使用它开发了各种应用程序。易于测试- Redux的代码大多是小的、纯的和孤立的函数。这使得代码可测试且独立。[组织][2]- Redux对代码应该如何组织非常精确,这使得代码在团队使用时更加一致和容易。