redux、react-redux、redux-thunk 之间有什么区别？

Question

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

但在 redux 中它令人困惑。这里没有商店，是的，有一些不使用商店的例子。我看了几个教程，似乎每个人都有自己的实现方式。有些正在使用容器，有些则没有。（我不知道这个 Container 概念，也无法理解 mapStateToProps、mapDispatchToProps 的作用）。

谁能清楚地解释一下 redux 中的控制流是如何发生的？
components/containers/actions/action creators/store 在 redux 中的作用是什么？
与redux/react-redux/redux-thunk/any其他人的区别？？
如果您可以 post 链接到任何 简单而精确的 redux 教程，那将非常有帮助。

Answer 1

Can someone clearly explain how control flow happens in redux ?

Redux（总是）只有一个商店。

每当你想替换商店中的状态时，你就派发一个动作。
action 被一个或多个 reducer 捕获。
reducer/s 创建一个结合了旧状态和调度操作的新状态。
通知商店订阅者有新状态。

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

Store - 保存状态，当新动作到达时运行 dispatch -> middleware -> reducers 管道，并在状态被新状态替换时通知订阅者。
组件 - 不直接了解状态的哑视图部分。也称为展示组件。
容器 - 使用 react-redux 了解状态的视图片段。也称为智能组件和高阶组件

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

操作 - 与通量相同 - 具有类型和负载的命令模式。
动作创建者 - 创建动作的 DRY 方式（并非绝对必要）

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

redux - flux like flow with a single store，可用于任何您喜欢的环境，包括 vanilla js、react、angular 1/2 等。 ..
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() 创建 HoCs（高阶组件）的函数，监听 store 的状态变化，为包装组件准备 props，并在状态变化。
redux-thunk - 允许您编写动作创建器的中间件 return 函数而不是动作。 thunk 可用于延迟动作的发送，或仅在满足特定条件时才发送。主要用于对 api 的异步调用，即在成功/失败时分派另一个操作。

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

Answer 2

回答你的标题问题：

What are differences between redux, react-redux, redux-thunk?

redux：主库（独立于 React）
redux-thunk: 一个 redux 中间件帮助您处理异步操作
react-redux：将你的 redux store 与 ReactComponents 连接起来

Answer 3

redux：用于管理应用程序状态的库。
react-redux：用于管理 React 应用程序（redux）状态的库。
redux-thunk：用于日志记录、崩溃报告、与异步通信 API、路由等的中间件...

Answer 4

下图演示了数据在 redux 中的流动方式： how the data flows through Redux? Redux 的优点如下：

结果的可预测性 – 因为总是有一个真实的来源，即商店，所以不会混淆如何将当前状态与动作和其他部分同步应用。 可维护性 – 代码变得更容易维护，具有可预测的结果和严格的结构。 服务器端渲染 – 您只需将在服务器上创建的商店传递到客户端即可。这对于初始渲染非常有用，并在优化应用程序性能时提供更好的用户体验。 开发人员工具 – 从动作到状态变化，开发人员可以实时跟踪应用程序中发生的一切。 社区和生态系统 – Redux 背后有一个庞大的社区，这使得它更易于使用。一大群有才华的人为图书馆的改进做出了贡献，并用它开发了各种应用程序。 易于测试 – Redux 的代码主要是小的、纯粹的和孤立的函数。这使得代码可测试且独立。 [组织][2] – Redux 精确地组织了代码，这使得代码在团队使用时更加一致和容易。

Answer 5

在我看来，Redux，第一次学习这个库还是有点迷茫，需要一些时间来理解和开始使用。即使您使用 Redux Toolkit——最新的库（来自 Redux 作者）——它也有一些棘手的时刻，这些时刻可能从一开始就不清楚。

我正在使用 Master-Hook。

库中已经安装了 Redux , react-redux , redux-thunk , reselect ，需要按照步骤操作

第一步：创建“src/hooks.js”文件

import MasterHook from 'master-hook'

export const useMyHook = MasterHook({
  storage: "myStorage",
  initialState: {
    myName: 'Vanda',
  },
  cache: {
    myName: 10000,
  }
})

您创建组件并将其导出（useMyHook）设置初始状态（initialState:...）设置值需要在缓存中保留多长时间（缓存：...）

第二步：添加Provider到src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import MasterHook from 'master-hook';

ReactDOM.render(
  <React.StrictMode>
    <MasterHook.Provider>
      <App />
    </MasterHook.Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

导入 MasterHook
用 MasterHook.Provider

第三步：在src/App.js

中使用你的钩子

    import logo from './logo.svg';
    import './App.css';
    import { useMyHook } from './hooks'
    
    function App() {
      const { myName, setMyName } = useMyHook()
    
      return (
        <div className="App">
          <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <p>
              My name is {myName}
            </p>
            <a
              onClick={() => setMyName('Boris')}
              className="App-link"
            >
              Set my name to 'Boris'
            </a>
          </header>
        </div>
      );
    }

export default App;

导入你的钩子使用MyHook

声明你的钩子

const { myName, setMyName } = useMyHook()

在您的代码中使用它

{myName}

和

{()=>setMyName('')}

删除 href 属性以防止其更改页面。 setMyName 操作是自动创建的。

无需连接到商店。已连接。

第四步：运行你的项目！

npm run start

就是这样 :)

redux、react-redux、redux-thunk 之间有什么区别？

What are differences between redux, react-redux, redux-thunk?

javascript

reactjs

reactjs-flux

redux

react-redux