I am using React + Flux. Our team is planning to move from flux to redux. Redux is very confusing for me coming from flux world. In flux control flow is simple from Components -> actions -> Store and store updates back components. Its simple and very clear.

但在redux中,它令人困惑.这里没有store ,是的,有一些例子没有使用store .我看了几个教程,似乎每个人都有自己的实现风格.有些使用容器,有些不使用.(我不知道这个容器概念,也无法理解MapStateTrops、mapDispatchToProps的功能).

  1. 有人能清楚地解释控制流是如何在redux中发生的吗?
  2. 组件/容器/动作/动作创建者/store 在redux中扮演什么角色?
  3. redux/react-redux/redux-thunk/任何其他之间的区别??
  4. 如果你可以发布simple and precise个redux教程的链接,这将非常有用.

推荐答案

  1. 有人能清楚地解释控制流是如何在redux中发生的吗?

Redux(一直)只有一家店.

  1. 无论何时,只要您想替换存储中的状态,就可以发送一个操作.

  2. 动作被一个或多个减速器捕捉.

  3. 减速器将创建一个新状态,该状态将旧状态和已调度的操作结合起来.

  4. store 订阅者会被通知有一个新状态.

  1. 组件/容器/动作/动作创建者/store 在redux中扮演什么角色?
  • 存储-保存状态,当新操作到达时运行调度->;中间件->;还原管道,并在状态被新状态替换时通知订阅者.

  • 组件-不直接知道状态的哑视图零件.也被称为表象成分.

  • 容器——使用react redux了解状态的视图片段.也称为智能组件和高阶组件


请注意,容器/智能组件和哑组件只是构建应用程序的好方法.


  • 动作-与流量相同-命令模式带有类型和有效载荷.

  • 动作创造者——创造动作的枯燥方式(并非严格必要)

  1. redux/react-redux/redux-thunk/其他版本之间的区别?
  • 无论是什么样的环境,包括1/2的角流,都可以在一个单独的存储中使用...

  • react-redux-redux和react之间的绑定.该库提供了一组react hooks-useSelector()useStore(),用于从存储中获取数据,useDispatch()用于调度操作.您还可以使用connect()函数创建HOC(高阶组件),它可以监听store 的状态变化,为包装组件准备props ,并在状态变化时重新渲染包装组件.

  • redux-thunk-中间件,允许您编写返回函数而不是操作的操作创建者.thunk可用于延迟动作的调度,或仅在满足特定条件时才进行调度.主要用于对api的异步调用,在成功/失败时发送另一个操作.

  1. 如果你能把链接发到任何简单而简单的网站上,这将是非常有帮助的
  • 一百

  • 一百

  • 一百

  • 一百

Reactjs相关问答推荐

在react中向数组状态添加值时出错

Next.js:提交表单时状态尚未就绪

XChaCha20-Poly1305的解密函数

为什么我的react虚拟化列表不显示滚动条,除非我确保高度低于rowCount*rowHeight?

FireBase未与Reaction应用程序连接

for each 子级加载父路由加载器

获取更改后的状态值

在transformResponse中使用来自其他查询的缓存

我如何在不被 destruct 的情况下将导航栏固定在顶部?

如何管理可重用无线电输入的 React 状态?

如何在Next.js应用程序中为路由[slug]生成.html文件?

使用新数据更新时,React 不更新具有过滤功能的深层嵌套对象数组中的变量状态

从服务器获取数据时未定义,错误非法调用

使用dayjs时如何在输入类型日期时间本地字段中设置默认值?

如何通过单击多个选项中的特定项目在模态上呈现不同的标题?

从一个获取 axios 请求(ReactJS)中删除默认参数

如何解决在 react.js 中找不到模块错误

如何使用 React Router 在 React 中正确同步 useEffect 和 useLocation 挂钩?

如何在 React 中的 Material Ui 多选中设置默认值?

如果两个组件在 React 中导入相同的 CSS 文件会发生什么?