react-redux入门

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

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

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

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

因此，假设您已经构建了一个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 组件都可以通过一些特殊方法直接与之交互。 需要一些状态？ 去商店 ！ 需要更新状态吗？ 向商店发送动作！ 一切都已连接！

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

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

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

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

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

这里还有一些其他的小问题-请注意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传递，这意味着从reducers中返回的任何内容都会更新store的状态。 然后，这些更改将通过我们放置在组件中的任何mapStateToProps函数向下传递，以订阅商店 ，并且我们的数据将被完全链接。 那是Redux！ 我们做到了！

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

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

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

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

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

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

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

翻译自: https://hackernoon.com/getting-started-with-react-redux-1baae4dcb99b

react-redux入门