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

Question

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

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

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

Answer 1

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

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

1. 每当您想要替换商店中的状态时，您都可以调度一个操作。

2. 动作被一个或多个reducer捕获。

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

4. 通知商店订阅者有一个新状态。

1. redux 中组件/容器/动作/动作创建者/存储的角色是什么？

• Store - 保存状态，当有新动作到达时运行调度 -> 中间件 -> 减速器管道，并在状态被新状态替换时通知订阅者。

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

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

---

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

---

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

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

1. redux/react-redux/redux-thunk/任何其他之间的区别？

• redux - Flux like flow 与一个单一的商店，可以在任何你喜欢的环境中使用，包括 vanilla js、react、angular 1/2 等...

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

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

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

• Redux official docs

• Getting Started with Redux

• Building React Applications with Idiomatic Redux

• Presentational and Container Components

Answer 2

回答你的标题问题：

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

1. redux：主库（独立于 React）
2. redux-thunk：一个 redux 中间件 帮助您进行异步操作
3. react-redux：用 ReactComponents 连接你的 redux 存储

Answer 3

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

Answer 4

在我看来，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

就是这样:)

Answer 5

下图展示了 redux 中的数据流向： how the data flows through Redux? Redux 的优点如下：

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