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

Redux（总是）有一个存储。

1. 每当您想替换 store 中的 state 时，您都需要发送一个 action。

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

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

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

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

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

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

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

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

• 操作 - 与通量相同 - 具有类型和有效载荷的命令模式。

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

4. 如果您可以发布指向任何简单而精确的 redux 教程的链接，那将非常有帮助。

• Redux 官方文档

• Redux 入门

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

• 展示和容器组件

回答你的标题问题：

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

1. redux：主库（独立于 React）
2. redux-thunk：一个 redux 中间件，可帮助您处理异步操作
3. react-redux：将您的 redux 存储与 ReactComponents 连接起来

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

在我看来，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:...) 设置值需要以毫秒为单位保持缓存的时间长度 (缓存:...)

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

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;

导入你的钩子 useMyHook

声明你的钩子

const { myName, setMyName } = useMyHook()

在您的代码中使用它

{myName}

和

{()=>setMyName('')}

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

无需连接到商店。它已经连接了。

第四步：运行你的项目！

npm run start

就是这样:)