从现实中理解 Redux

[hankzhuo]

从现实中例子理解 Redux

第一次看 redux 文档时候，说实话我是看的比较抽象的，比如 Action、 dipatch、Reducer、Store 等概念，对于刚入 React 全家桶，这些概念会让人觉得有点绕。

但它太棒了，它是 React 全家桶里很重要的组成部分，如果你项目中使用 React 技术栈（当然 React 与 Redux 不是绑定关系），那么 Redux 思想是必须要了解下，当你使用过一段时间时候，真的会被其思想感染，只能说这些库的作者是真的强，给他们点赞。

偶然间，在国外技术论坛看到一些文章，把 Redux 解释的非常通俗易懂，把 Redux 与现实中例子结合起来，构成了非常清晰的、完整的一套逻辑。

Redux 是什么

为啥要用到 Redux？因为在一个 app 项目中，如果涉及到 state 复杂交互，在 React 组件内部对于 state 的管理是不方便，不便于维护，使用统一管理 state 的库是比较合适的。当然，如果你的项目比较简单，完全可以不需要 redux。

那么 Redux 是什么？官方文档解释：

Redux is a predictable state container for JavaScript apps.

如果你了解过 React，那么肯定知道 state 概念，那么 Redux 可以理解为 state 的外部状态管理容器，是不是还很有点意思了？接下来我会给你一步步解释每个概念。把 Redux 与 “去银行取钱的过程”结合起来，更好地理解它们之间的关系。

解释 API

首先，你的钱都储存在银行金库里，银行保存着你所有的钱，相对应的，把银行金库比作 Redux 里的 Store，而 Store 储存着你 app 中的所有 State。

先记住这个对应关系：

金库 <==> Store

你的钱 <==> State

现在，你要去银行取钱，这个想法或者目的，相对应的，Redux 里的Action 。

取钱想法 <==> Action

去取钱，还是存钱？这个对应的 Redux 里是 Action 里的 Type：

取钱还是存钱 <==> Type

action 形式简单表示如下： { type: "WITHDRAW_MONEY", amount: "￥1,000" } 把卡给收银员或者 ATM 取钱，然后把钱给你，相对应的，就是 Redux 里的，发起一个action，传递给Reducer返回一个新的State`。

收银员 / ATM <==> Reducer

总结：

本篇内容主要讲 Redux 的理论，把 Redux 比喻成去银行取钱，能更好理解 Redux。

Redux 与实际的对应关系：

1. 金库或银行 <==> Store
2. 你的钱 <==> State
3. 取钱的想法或目的 <==>Action
4. 取钱还是存钱 <==> Type
5. 收银员 / ATM <==> Reducer

流程： 去银行取钱，把卡给收银员(或 ATM 机)，取多少钱，然后收银员把钱取出来给你的过程。

在 app 中，更新 state 的过程：dipatch 一个 action 给 reducer（收银员），reducer（收营员） 返回一个新的 state（你银行还剩下的钱） 。

Hello Redux

安装环境

理论与代码结合，实践动手，才能更好理解 Redux。

老样子，学一门技术，都是从简单的应用开始的。

首先，为了节省时间和以学习 Redux 的目的，使用 React 脚手架 create-react-app 安装 React 环境。

React 内部 state

安装好环境后，按照提示把项目跑起来，修改 src/App.js 文件，

src/App.js

import React, { Component } from "react";
import HelloWorld from "./HelloWorld";

class App extends Component {
    constructor(props) {
      super(props)
      this.state = {
        tech: 'react'
      }
  }
  render() {
    return <HelloWorld tech={this.state.tech}/>
  }
}

export default App;

在 src 目录下创建一个 React 无状态组件 <HelloWorld/>:

import React from 'react'

const HelloWorld = ({tech}) => {
  return <div>
    Hello World <span>{tech}!</span>
  </div>
}

export default HelloWorld

可以看到，默认情况下是， React 内部通过 this.state.tech，传递给子组件。

Redux 传递 state

接下来，把内部传递 state 修改成 Redux 传递的 state。

先 npm install redux --save 安装 Redux 库，安装成功后，在 src/App.js 中添加 redux 进来，如下：

import { createStore } from 'redux'
const store = createStore() 

通过 createStore() 是生成 store，createStore 函数接受一些参数，第一个参数是 reducer，如下：

const store = createStore(reducer) 

现在把 reducer 传进来，新建一个 reducer，在 src/reducers 目录下新建一个 index.js 文件。reducer 返回一个 state（这里先简单地返回一个 state），index.js 文件如下：

export default (state) => {
  return state
}

createStore 还可以接受第二个参数 initialState，initialState 是初始状态，修改后如下：

const initialState = { tech: "Redux"};
const store = createStore(reducer, initialState);

还记得上一篇文章，state（你的钱）是从 store（收营员） 返回的吗？使用 store.getState().tech 返回新的 state，src/App.js 完整代码如下：

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import HelloWorld from './HelloWorld'
import { createStore } from 'redux'
import reducer from './reducers'

const initialState = { tech: 'Redux'}
const store = createStore(reducer, initialState)

class App extends Component {
  render() {
    return <HelloWorld tech={store.getState().tech}/>
  }
}

export default App

现在为止，项目从组件内部 state 传递，现在从 redux 传递 state 了。 以上就是简单的 Hello Redux 入门程序。

总结

这一篇文章主要讲了，从 React 中内部更新 state 到 Redux 获取 state。 下面总结下知识点：

1. Redux 是一个可预测的 JavaScript app 的状态管理
2. createStore 是一个工厂函数，用于生成 store
3. createStore 第一个参数 reducer，是必须传递的，第二个参数是初始 状态 initialState
4. reducer 是一个纯函数，接受两个参数，一个是初始化 state，另一个是 action
5. Reducer 总是返回一个新的 state
6. store.getState() 将会返回当前的 state