React-Redux入门

  • Z时代
  • 2024-01-10
  • 分类：综合

react

让我做个准备：您已经为Web应用程序提出了一个好主意，并决定使用React来构建它。 举一个完全任意的例子，我们假设它是一个吉他弦和弦查找器，带有一个交互式的吉他琴颈和一个提交表单（例如， 这个 ）。

无耻的自我提升！

您已经列出了一些待办事项，观看了一些教程，并且您认为自己掌握了所有这些“道具”内容，因此您可以立即加入。它做得很好-您已经有了最好的选择级别的应用程序组件，也许是形式，吉他组件……然后，它开始在您身上崭露头角。 您将需要一把吉他，六根弦，每根十二个品格，所有这些都需要传达有关是否将其静音，按下或打开的信息……这需要能够与形式进行交流并表达出来。一段和弦…在您知道之前已经过去了六个小时，墙上满是纱，您可以确定自己已经发现了一个密谋，完全是虚构的人和美国邮政总署的阴谋。

永远阳光迷的旁注，您是否注意到“ Pepe Sylvia”听起来像一个文盲如何尝试阅读“ Pennsylvania”？ 那就是我们需要的那种微妙的喜剧。

但不要烦恼（双关语意）！ 您可能已经听说过这个很酷的工具Redux，它是针对这样的场景而设计的，当您的组件嵌套失去控制并且道具左右传递时。 可以说，由于React新改组的Context API和其他竞争性库，它正在走出困境，而且它往往激起开发人员之间的热情，他们往往认为这既是切成薄片以来最好的东西，也可能是令人生厌的混乱，但它肯定还有它的位置。

来自世界各地的创作者和开发者的有关Redux使用的黄金法则近似于“如果不确定是否需要Redux，则可能不需要。” 我对那些人说...好吧，您可能是对的。 Redux 确实为简单任务增加了很多复杂性和样板，我们很快就会发现。 而且，事实上，我确实使用常规的旧版React构建了这个吉他应用程序，效果很好。 但是，那时我还很年轻，还很幼稚（两个月前），所以为了说明起见，让我们了解一下它如何使我们的生活更轻松。 一旦我们摆脱了样板，Redux就可以使您的应用程序更具可扩展性，更高性能，并且更易于调试和推理。 另外，我真的很喜欢！

艺术家对React应用的渲染。 谁有时间进行所有嵌套？

因此，假设您已经构建了一个React应用程序。 如果没有，检查出的一个许多 伟大 的教程 了 那里 。 如果需要，甚至可以尝试使用create-react-app 。 一旦启动并运行，我们要做的第一件事就是安装我们的软件包！ 

sudo npm install redux
sudo npm install react-redux

精明的读者可能会注意到，我们同时安装了Redux和特定于React的版本-有什么用！ 好吧，Redux实际上是一个与框架无关的库。 您可以将其与Backbone，Mithril，Angular，Meteor或Vue一起使用-它将与所有这些一起使用！ 但是，React特定版本具有一些方法，这些方法在我们在组件中进行设置时对我们将非常有用。

随着安装的进行，我们将设置文件结构，该文件结构比传统React应用程序中使用的文件结构要多一些。 每个人的操作都有些不同，但是通常我喜欢在我的react-client / src目录中创建一个动作文件夹，一个reducers文件夹和一个store文件夹，如下所示：

您可能会看到有些人使用常量，但我不会理会这些常量。

大！ 因此，让我们从商店开始-这就是使Redux工作的原因。 您可以将其视为一个外部状态容器，无论组件在项目层次结构中的嵌套级别如何，React 组件都可以通过一些特殊方法直接与之交互。 需要一些状态？ 去商店 ！ 需要更新状态吗？ 向商店发送动作！ 一切都已连接！

是的，我在一篇文章中两次使用了相同的引用。 这是……关于Redux如何使您在应用程序中的某些地方编写相同内容的隐喻……。

让我们在商店文件夹中创建一个index.js文件。 首先，我们将导入React，因此我们可以访问它-很有道理。 接下来，我们将直接从Redux导入两个方法： createStore和CombineReducers。 这些将按照他们的声音听起来一样！ 什么是异径管 ，为什么我们要将它们合并？ 让我们搁置这个问题，除了要说我们还将导入我们的reducers.js文件之外，我们还需要在reducers文件夹中制作该文件。 我们所有的import语句之后，我们要创建一个变量名为店和combineReducers，这需要一个对象作为参数，将成为我们的全球应用程序状态结合它里面我们减速 。 放在一起，看起来像下面。

第9行专门用于使用Redux出色的浏览器扩展。 我强烈推荐它，但这不是强制性的。

仍然缺少一件：Redux的Provider 组件 。 这是一个上下文包装器，它需要围绕您的整个应用程序，并且将商店作为属性接收，从而允许您的所有其他组件通过Redux的方法访问它。 在我们应用程序的最高级别，我们的index.jsx 在将React附加到DOM的文件中，我们只需导入Store ， Provider和我们的App组件 （我们将在稍后构建），然后将所有内容捆绑在一起。

这样，我们的整个应用程序都可以访问我们的商店！

现在我们已经建立了商店 ，让我们讨论一下Redux生态系统的其余部分。 这是最复杂的部分，请多多包涵。 实际上，您具有一个循环关系，该关系为商店 -> 组件 -> 动作 -> 减速器 -> 商店 （如下图所示）。

商店的状态通过一个名为mapStateToProps的小函数映射到组件上-您可以将其视为订阅服务。 实际上，此方法利用的本机Redux方法称为“ 订阅” （即使我们在本教程中实际上不会直接使用它）。 对商店所做的任何更改将流到已订阅商店中该属性的任何组件 ，从而触发重新渲染。 整洁吧？

为了真正影响应用程序的状态， 组件必须使用单独的函数： mapDispatchToProps 。 Dispatch是另一个存储方法，它采取一个操作 （我们导入）并将其发送给reducer ，该reducer接收该操作并实际上更改应用程序的状态。 我知道这是一个大问题，但让我们从一个超简单的组件开始逐步进行介绍。 这将是我们最高级的App组件 ， 还将从Redux导入一个称为bindActionCreators的方法，以及从React-Redux导入一个名为connect的方法。 前者只是使我们的mapDispatchToProps函数编写更加简洁 ，而后者是一个高阶组件 ，它将我们的 组件与mapStateToProps和mapDispatchToProps捆绑在一起 ，以便这些方法可以访问商店 。 以机智：

注意我们如何在第5行导入操作。

这里还有一些其他的小问题-请注意mapStateToProps如何将应用程序状态作为参数，以及如何从该状态中提取单个属性。 这些属性可以在该组件的props上访问 ，因此，如果我们想获得examplePropOne ，我们将在组件的render函数中这样做（注意<p>标签）： 

render() {
    return (
        <div>
            <h1>Hello world, this is a Redux tutorial!</h1>
            <p>Here is our property: {this.props.examplePropOne}</p>
        </div>
    )
}

这样，即使对examplePropOne所做的任何更改，即使是从另一个组件进行的更改，也将流经此组件并呈现在其中。 您不必在mapStateToProps函数中从状态对象中挑选所有属性，只需引入您组件所关心的属性即可！

同样， mapDispatchToProps将派遣作为参数。 Dispatch是Redux 存储的一种特殊方法，通过bindActionCreators将我们的操作与之关联，我们都将其附加到组件的props上，并说，只要调用它，它就会将有问题的操作分派给reducer最终变成商店里的状态。

这里有一个如何可能看起来在同一组件上的功能的例子： 

exampleFunction() {
    this.props.exampleAction();
}

还在我这儿？ 组件中要注意的最后一件事是connect方法的语法—它始终带有两个参数，并且按顺序依次始终是mapStateToProps和mapDispatchToProps 。 您可以轻松省略mapDispatchToProps ，但是如果要在特定组件上省略mapStateToProps ，请确保在其位置保留一个空值。 组件本身的名称应在connect语句的最后调用。 这是另一个示例，这次编写的示例不带mapStateToProps ， 而是一个名为List的组件 ： 

export default connect(null, mapDispatchToProps)(List);

到目前为止，我们已经处理了Redux生命周期的存储和组成部分。 剩下的只是行动和减速器 。

动作是最简单的部分-它们只是创建JavaScript对象的函数，具有一个称为type的强制属性。 按照惯例， 类型通常用大写字母写成，并且非常说明该动作的实际作用。 它通常还有另一个称为有效负载的属性，在该属性中，我们将传递的所有实际数据放入动作中 。 通常，我们希望避免在这些动作中包含任何实际的应用程序逻辑：它们应该仅传递类型并可能传递一些数据。 这是我们的action / actions.js文件的外观：

请注意，第二个动作如何接收一个参数，它作为有效负载传递。

这实际上就是行动 ！

至此，我们的生命周期只剩下一个项目： reducers 。 reducer实际上是一个巨大的switch语句，它执行一个动作，并根据其类型来更新应用程序的状态。 如果您还记得的话，当我们在上面创建商店时 ，我们导入了reducer并将它们通过createStore函数中的CombineReducers传递，这意味着从我们的reducer中返回的任何内容都会更新store的状态。 然后，这些更改将通过我们放置在组件中的任何mapStateToProps函数向下传递，以订阅商店 ，并且我们的数据将被完全链接。 那是Redux！ 我们做到了！

现在，到目前为止，我遗漏了一个重要的概念—实际上，它是Redux中最重要的基础概念之一： 不变性 。 简而言之，使用Redux时，为了简化调试，清理代码，简化代码以及提高应用程序性能，我们实际上从未直接改变应用程序的状态。 取而代之的是，每个状态更改都会被及时记录为快照，并且每个状态更改都会复制到该状态。 有关如何使用此功能的最明显示例，请使用前面提到的Redux开发工具：它在整个应用程序的生命周期中记录了整个状态历史记录，以便您逐步了解如何以及当事情发生变化时。 超级有用！ 如果有时间，我强烈建议您随便看看。

综上所述，这是一个reducer的示例，即一个接收应用程序状态以及传入动作的函数，该函数通过switch语句运行它，并将状态的更新版本返回给送到商店 ：

我们不必像本示例中那样提供默认状态-在某些应用中，您将在其他文件中定义默认状态，为其提供初始化属性，然后将其导入到reducer中 。 在其他应用中，您可以简单地使用ES6的默认参数将状态初始化为空对象。 除了必须定义状态外，没有硬性规定可以初始化状态，并且化简器必须始终返回状态。 为此，我们不要忘记第18行的默认情况也很重要。

最重要的是， reducer应该以状态对象和动作作为参数，并在动作的 类型属性，然后返回状态的复制版本以及所需的更新属性。 请注意第10和15行上的散布运算符：它们在添加和/或修改所需的属性之前散布了先前的状态，这意味着您最终将通过每个操作将复制的，状态略有修改的状态返回给商店 。 您也可以使用Object.assign来执行此操作，但是我发现散布运算符更加优雅。 还要注意，在第16行，我们如何使用操作的 有效负载属性将数据传递到我们的状态中，而在第11行，我们正在硬编码对examplePropOne的修改。

关于React-Redux，我们还有很多可以讨论的话题。 以异步操作为例：传递API调用的结果，大多数情况下很轻松的操作 ，如果您执行的操作在执行前需要满足某些条件，则可能会引起头痛。 有一个叫做redux-thunk的库可以帮助解决这个问题。 您还可以在一个项目中具有多个reducer ，然后将其通过商店文件中的CombineReducers函数传入。 此外，局部状态在单个组件中仍然非常有用，并且仅当在嵌套组件之间传递状态时，才应真正涉及存储 。 我鼓励您阅读更多内容并开始尝试以了解Redux的所有优点，并阅读竞争的状态管理解决方案，包括mobx和上述Context API。

不过，目前我希望您能看到Redux如何使我们的吉他应用程序更简单。 假设用户点击了品格，我们需要更新它所在的字符串，吉他组件 ，应用程序组件和表单组件 。 无需遍历整个道具 ，甚至可以不使用它的多个层次，我们可以分派一个动作并设置几个订阅，我们很乐意！ 在具有大量嵌套和大量状态需要管理的大型应用中，这可以使您的生活变得更加简单，这是解决一个非常棘手的问题的一种可能的解决方案。

如果您已经做到了这一点，感谢您的阅读！ 这是一只可爱的雪貂，谢谢。

From: https://hackernoon.com/getting-started-with-react-redux-1baae4dcb99b

以上是 React-Redux入门 的全部内容， 来源链接： utcz.com/z/381196.html

回到顶部