redux，react-redux，redux-thunk有什么区别? [英] What are differences between redux, react-redux, redux-thunk?

问题描述

我正在使用React + Flux.我们的团队计划从助焊剂转变为还原剂.Redux对来自助焊剂世界的我非常困惑.通过 Components-> actions->存储和存储更新后的组件，在 flux控制流中很简单.简单明了.

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中却令人困惑.这里没有商店，是的，有一些没有使用商店的示例.我经历了一些教程，看来每个人都有自己的实现风格.有些正在使用容器，有些则没有.(我不知道这个Containers概念，也无法理解mapStateToProps，mapDispatchToProps的作用).

But in redux its confusing. There is no store here, yes there are some examples without using store. I went through several tutorials, it seems everyone has their own style of implementation. Some are using Containers and some are not. (I don't know this Containers concept and not able to understand what mapStateToProps, mapDispatchToProps does).

1. 有人可以清楚地说明redux中的控制流是如何发生的吗?
2. redux中组件/容器/动作/动作创建者/商店的角色是什么?
3. redux/react-redux/redux-thunk/其他之间的区别?
4. 如果您可以发布指向任何简单而精确 redux教程的链接，这将非常有帮助.

1. Can someone clearly explain how control flow happens in redux ?
2. What are roles of components/containers/actions/action creators/store in redux ?
3. Difference between redux/react-redux/redux-thunk/any others ??
4. It would be very helpful if you can post links to any simple and precise redux tutorials.

推荐答案

1. 有人可以清楚地说明redux中的控制流如何发生吗?

Redux(总是)有一个商店.

Redux has (always) a single store.

1. 无论何时要替换存储中的状态，都将调度操作.

1. Whenever you want to replace the state in the store, you dispatch an action.

该动作被一个或多个减速器捕获.

The action is caught by one or more reducers.

reducer创建一个结合了旧状态和分派动作的新状态.

The reducer/s create a new state that combines the old state, and the dispatched action.

商店订户被通知存在新状态.

The store subscribers are notified that there is a new state.

1. redux中组件/容器/动作/动作创建者/商店的角色是什么?

• Store-保持状态，并且当新动作到达时运行调度->中间件->reducers管道，并在状态被新状态替换时通知订户.

  • Store - holds the state, and when a new action arrives runs the dispatch -> middleware -> reducers pipeline, and notifies subscribers when the state is replaced by a new one.

    组件-无法直接知道状态的哑视图部分.也称为演示组件.

    Components - dumb view parts which are not aware of the state directly. Also known as presentational components.

    容器-使用react-redux知道状态的部分视图.也称为智能组件和高阶组件

    Containers - pieces of the view that are aware of the state using react-redux. Also known as smart components, and higher order components

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

    Note that containers / smart components vs. dumb components is just a good way to structure your app.

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

    • Actions - same as flux - command pattern with type and payload.

    动作创建者-创建动作的DRY方法(并非绝对必要)

    Action creators - DRY way of creating actions (not strictly necessary)

    1. redux/react-redux/redux-thunk/其他之间的区别?

    • redux -具有单个存储库的流式流量，可以在任何情况下使用您喜欢的环境包括vanilla js，react，angular 1/2等...

      • redux - flux like flow with a single store, that can be used in whatever environment you like including vanilla js, react, angular 1/2, etc...

        反应-redux -redux和react之间的绑定.该库提供了一组反应挂钩- useSelector()，然后使用 useStore()从存储中获取数据，并使用 useDispatch()分发操作.您还可以使用 connect() 函数创建HoC(高阶组件)侦听商店的状态更改，为包装的组件准备道具，并在状态更改时重新呈现包装的组件.

        react-redux - bindings between redux and react. The library offers a set of react hooks - useSelector(), and useStore() to get the data from the store, and useDispatch() to dispatch actions. You can also use the connect() function to create HoCs (higher order components), that listen to the store's state changes, prepare the props for the wrapped component, and re-render the wrapped components when the state changes.

        redux-thunk -中间件，可让您编写返回的动作创建者功能而不是动作.重击程序可用于延迟操作的分发，或者仅在满足特定条件时调度.主要用于对api的异步调用，该调用会在成功/失败时调度另一个操作.

        redux-thunk - middleware that allows you to write action creators that return a function instead of an action. The thunk can be used to delay the dispatch of an action, or to dispatch only if a certain condition is met. Used mainly for async calls to api, that dispatch another action on success / failure.

        1. 如果您可以发布指向任何简单和精确的redux教程.

        • Redux官方文档

          Redux入门

          使用惯用Redux构建React应用程序

          娱乐和容器组件

          这篇关于redux，react-redux，redux-thunk有什么区别?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！