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

问题描述

我正在使用 React + Flux.我们的团队正计划从flux 转向redux.Redux 对来自 Flux 世界的我来说非常困惑.在flux 控制流程中很简单，从组件 -> 操作 -> 存储和存储更新返回组件.它简单明了.

但在 redux 中它令人困惑.这里没有商店，是的，有一些不使用商店的例子.看了几个教程，好像每个人都有自己的实现风格.有些正在使用容器，有些则没有.(我不知道这个 Containers 概念，也无法理解 mapStateToProps、mapDispatchToProps 的作用).

1. 有人能清楚地解释一下 redux 中的控制流是如何发生的吗?
2. 组件/容器/动作/动作创建者/商店在 redux 中的作用是什么?
3. redux/react-redux/redux-thunk/其他的区别??
4. 如果您可以发布任何简单而精确的 redux 教程的链接，将会非常有帮助.

解决方案

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

Redux(总是)有一个存储.

1. 每当您想替换 store 中的 state 时，您都可以分派一个 action.

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

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

4. 商店订阅者会收到有新状态的通知.

<块引用>

2. 组件/容器/动作/动作创建者/商店在 redux 中的作用是什么?

• Store - 保存状态，当一个新的 action 到达时运行 dispatch ->中间件 ->reducers 管道，并在状态被新状态替换时通知订阅者.

• 组件 - 不直接知道状态的哑视图部件.也称为展示组件.

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

---

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

---

• 动作 - 与flux相同 - 具有类型和负载的命令模式.

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

<块引用>

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

• redux - 具有单一存储的流，可用于任何环境你喜欢包括 vanilla js、react、angular 1/2 等......

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

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

<块引用>

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

• Redux 官方文档

• Redux 入门

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

• 演示和容器组件

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.

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. 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. Can someone clearly explain how control flow happens in redux ?

Redux has (always) a single store.

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

2. The action is caught by one or more reducers.

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

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

2. What are roles of components/containers/actions/action creators/store in redux ?

• 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.

• 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.

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

3. Difference between redux/react-redux/redux-thunk/any others ?

• 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...

• 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 - 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.

4. It would be very helpful if you can post links to any simple and precise redux tutorials.

• Redux official docs

• Getting Started with Redux

• Building React Applications with Idiomatic Redux

• Presentational and Container Components

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