摘要：归约器函数负责返回应用当前全局状态的表示形式。当我们在存储上发送操作时将使用应用的当前状态和导致状态更新的操作来调用此归约器函数。回到我们的归约器我们可以检查的动作类型并采取适当的步骤创建下一个状态。我们将处理动作创造者中归约器的副作用。

本文转载自：众成翻译
译者：iOSDevLog
链接：http://www.zcfy.cc/article/3811
原文：https://www.fullstackreact.com/30-days-of-react/day-19/

随着我们了解了flux和Redux的知识，让我们将Redux整合到我们的应用中，并通过连接的应用。

昨天, 我们讨论了流量模式的原因, 它是什么, 我们有不同的选择, 以及介绍了Redux。

今天, 我们将回到代码和添加Redux在我们的应用。现在我们正在用它构建的应用是简单的, 这只会显示我们最后一次获取当前时间的页面。为了简单起见, 我们不会调用远程服务器, 只需使用 JavaScript 的Date 对象。

第一件事, 我们使用redux将不得不安装redux库。我们可以使用npm 包管理器来安装redux。在我们以前构建的应用的根目录中, 让我们运行npm install 命令来安装redux:

npm install --save redux

想使用redux, 我们还需要安装另一个包, react-redux , 帮助我们把react 和 redux绑在一起。

npm install --save react-redux

接下来的工作, 我们需要做的是在我们的应用内建立redux。我们需要执行以下操作才能设置它:

定义归约

创建Store

创建动作创造者

将Store与我们的React意见联系起来

得益

第5步没有promises, 但它会更好, 嗯？

我们少量地讨论术语,(让我们的手指移动是更重要的)。我们将只是稍微调整我们的应用(烦人, 我知道, 但这是最后一次), 所以我们为了提供数据通过我们的应用可以创建一个包装组件。

完成后, 我们的应用树将具有以下形状:

[Root] -> [App] -> [Router/Routes] -> [Component]

废话少说, 让我们将我们的 src/App.js 移动到src/containers目录中, 我们需要同时更新来自我们的导入的一些路径。我们将使用几天前讨论的React路由材料。

我们将在 语句中包含几条路由, 以确保一次只显示一个。

import React from "react";

import {
  BrowserRouter as Router,
  Route,
  Switch
} from "react-router-dom"

// We"ll load our views from the `src/views`
// directory
import Home from "./views/Home/Home";
import About from "./views/About/About";

const App = props => {
  return (
    
      
        
        
      
    
  )
}

export default App;

此外, 我们将需要创建一个新的容器, 我们将调用Root , 这将包装我们的整个 组件, 并使可用的其余应用。让我们创建src/containers/Root.js 文件:

`touch src/containers/Root.js`

目前, 我们将在这里使用一个占位符组件, 但我们将在讨论存储时替换此内容。现在, 让我们导出 _一些东西_:

import React from "react";
import App from "./App";

const Root = (props) => {
  return (
    
  );
}

export default Root;

最后, 让我们更新的路由, 我们渲染我们的应用在src/index.js文件使用我们的新的Root 容器, 而不是它以前使用的App 。

import React from "react";
import ReactDOM from "react-dom";
import Root from "./containers/Root";
import "./index.css";

ReactDOM.render(
  ,
  document.getElementById("root")
);

现在有了一个坚实的应用结构就位, 我们可以开始添加Redux。我们将采取的步骤以配合一些我们将建立的大多数应用的Redux结构通常都是相同的。我们需要:

写一个根归约器

写 actionCreators

配置存储、rootReducer和应用

将视图连接到 actionCreators

我们故意保持这个高层次的介绍短一些, 所以坚持一下, 这一切都将在短期内变得更有意义。

让我们设置允许我们添加Redux的结构。我们将在src/redux 目录中完成几乎所有的工作。让我们创建该目录。

mkdir -p src/redux
touch src/redux/configureStore.js
touch src/redux/reducers.js

首先我们先创建归约器。虽然它听起来很复杂, 但是归约器实际上是相当直接的, 有一定的经验。归约器仅是 字面 函数。它的唯一责任是返回一个 next 状态的表示。

在Redux模式, 不像flux, 我们只在 整个 应用处理 一个 全局存储的。这使得事情变得更容易处理, 因为有一个地方的数据, 我们的应用生活。

root 归约器函数负责返回应用当前全局状态的表示形式。当我们在存储上发送操作时, 将使用应用的当前状态和导致状态更新的操作来调用此归约器函数。

让我们在一个文件中建立我们的根归约器在src/redux/reducers.js.。

// Initial (starting) state
const initialState = {
  currentTime: new Date().toString()
}

// Our root reducer starts with the initial state
// and must return a representation of the next state
const rootReducer = (state = initialState, action) => {
  return state;
}

export default rootReducer

I在函数中, 我们将第一个参数定义为初始状态 (第一次运行时, 不带参数调用rootReducer , 因此它总是在第一次运行时返回 initialState )。

这就是现在的 rootReducer。就像现在这样, state的价值总是和 initialState 一样。在我们的例子中, 这意味着我们的数据树有一个单一的currentTime键。

这里的第二个参数是从存储区发送的操作。我们很快就会回来。现在，让我们来看看动作。

最起码, 一个动作 必须 包括一个type 键。type 键可以是我们想要的任何值, 但它必须存在。例如, 在我们的应用中, 我们将偶尔发送一项操作, 我们想告诉存储获取 最新 当前时间。我们可以将此操作称为FETCH_NEW_TIME 的字符串值。

我们可能从我们的存储发送的处理此更新的操作如下:

{
  type: "FETCH_NEW_TIME"
}

正如我们将通过键入这个字符串很多, 我们希望避免可能的拼写错误的地方, 它是常见的创建一个types.js 文件, 将操作类型导出为常量。让我们遵循这个约定, 创建一个src/redux/types.js 文件:

`export const FETCH_NEW_TIME = "FETCH_NEW_TIME";`

我们将从types.js 文件中引用它, 而不是使用"FETCH_NEW_TIME" 的硬编码字符串调用该操作:

import * as types from "./types";

{
  type: types.FETCH_NEW_TIME,
}

当我们想发送数据与我们的动作, 我们可以添加任何键, 我们想我们的动作。我们通常会看到这个所谓的payload 有效载荷, 但它可以被称为任何东西。这是一个公约, 调用附加信息的payload。

我们的FETCH_NEW_TIME 动作将发送一个有效载荷与新的当前时间。因为我们想发送一个 序列化 值与我们的动作, 我们将发送新的当前时间的字符串值。

{
  type: types.FETCH_NEW_TIME,
  payload: new Date().toString() // Any serializable value
}

回到我们的归约器, 我们可以检查的动作类型, 并采取适当的步骤, 创建下一个状态。在我们的情况下, 我们只储存payload。如果操作的type 是FETCH_NEW_TIME, 我们将返回新的 currentTime (从我们的操作有效负载) 和其他状态 (使用 ES6 扩展语法):

export const rootReducer = (state = initialState, action) => {
  switch(action.type) {
    case types.FETCH_NEW_TIME:
      return { ...state, currentTime: action.payload}
    default:
      return state;
  }
}

请记住, 归约 必须 返回一个状态, 所以在默认情况下, _最起码_确保返回当前状态。

保持轻型化
由于归约器的功能每次调度一个动作, 我们要确保这些功能是尽可能简单和快速。我们不希望他们造成任何副作用或有太多的延迟。
我们将处理动作创造者中归约器的副作用。

在我们看动作创造者 (以及为什么我们称他们为动作创造者) 之前, 让我们把我们的存储与我们的应用挂钩。

我们将使用 react-redux 包将我们的视图连接到我们的redux存储。让我们确保使用npm安装此包:

npm install --save react-redux

react-redux 包输出一个名为 Provider 的组件。Provider 组件使存储可以使用我们的应用中的所有容器组件, 而无需我们每次都需要手动传递它。

Provider 组件期望一个store 的属性, 它期望是一个有效的redux存储, 所以我们的应用没有错误运行之前,我们需要完成一个configureStore 功能,。现在, 让我们在应用中连接Provider 组件。我们将通过更新我们以前创建的包装Root 组件来使用Provider 组件来完成此项。

import { Provider } from "react-redux";
  // ...
const Root = (props) => {
  // ...

  return (
    
      
    
  );
}

请注意, 我们正在将store 值发送到Provider 组件, 但我们还没有创建该存储。现在我们来解决这个问题。

为了创建一个存储, 我们将使用新的src/redux/configureStore.js 来导出将负责创建存储的函数。

我们如何创建一个存储？

redux包输出一个叫做 createStore 的函数, 它将为我们创建实际的存储区, 因此, 让我们打开 src/redux/configureStore.js 文件并导出一个称为configureStore()的函数 (我们将很快定义), 并导入createStore` 帮助器:

import {createStore} from "redux";
  // ...
export const configureStore = () => {
  // ...
}
  // ...
export default configureStore;

实际上我们在我们的存储还没有返回任何东西, 所以让我们实际创建的redux 存储使用 createStore 的功能, 我们从redux导入:

import {createStore} from "redux";

export const configureStore = () => {
  const store = createStore();

  return store;
}

export default configureStore;

如果我们在浏览器中加载我们的页面, 我们将看到我们有一个巨大的错误: 没有页面得到渲染。

redux给我们的错误告诉我们, 我们存储里没有归约器。如果没有归约器, 它将不知道如何处理动作或如何创建状态等。为了越过这个错误, 我们需要参考我们创建的 rootReducer。

createStore 函数要求我们将 rootReducer 作为第一个参数来传递。它还希望将初始状态作为第二个参数传递。我们将从我们创建的reducers.js 文件中导入这两个值。

import { rootReducer, initialState } from "./reducers"
  // ...
export const configureStore = () => {
  const store = createStore(
    rootReducer, // root reducer
    initialState, // our initialState
  );

  return store;
}

现在, 让我们通过调用 configureStore() 函数创建store 的实例来更新我们的Root.js 文件。

const Root = (props) => {
  const store = configureStore();

  return (
    
      
    
  );
}

我们的应用中的一切都设置为使用redux, 而无需 太 多开销。redux 提供的一个更方便的方法是使用react-redux包导出的connect() 函数, 将状态树的片断 绑定 到不同的组件。

connect() 函数返回一个函数, 它期望第一参数是一个组件。这通常叫做高阶组件。

connect() 函数要求我们在函数中至少传递一个参数 (但通常我们会传递两个)。它所期望的第一个参数是一个函数, 它将被称为state 并期望一个返回的对象将数据连接到视图。让我们看看我们是否能在代码中揭开这种行为的神秘面纱。

我们将这个函数称为mapStateToProps 函数。因为它的责任是将状态映射到与组件的原始props合并的对象。

让我们在src/views/Home.js 中创建 home 视图, 并使用此connect() 函数来绑定currentTime 在我们的状态树中的值。

import { connect } from "react-redux";
  // ...
const mapStateToProps = state => {
  return {
    currentTime: state.currentTime
  }
}
export default connect(
  mapStateToProps
)(Home);

此connect() 函数 自动 将函数的第一个参数中的任何键传递为Home 组件的props 。

在我们的演示案例中, Home 组件中的currentTime属性将映射到currentTime中的状态树键。让我们更新 Home 组件, 以显示currentTime中的值:

const Home = (props) => {
  return (
    

      
Welcome home!
      
Current time: {props.currentTime}
    
  );
}

虽然这个演示不是很有趣, 它表明我们有我们的Redux 应用建立了我们的 data 致力于全局状态和我们的视图组件映射数据。

明天, 我们将开始通过操作创建者来触发我们的全局状态的更新, 并通过将多个redux模块组合在一起来工作。