[譯】Redux入門教程（一）

前言

老外寫技術文章真是叼，這是國外的一個程序員寫的一個簡單易懂,按部就班的Redux教程，本着共享的精神，就翻譯出來給你們一塊兒看，文章最後有連接，不想看我翻譯的直接去看原文吧。

下面是原教程的英文目錄

這篇先更三分之一左右，若是小夥伴們喜歡的話，我再更剩下的，若是沒人看，我沒動力更啊

開始享受你的閱讀之旅吧!

本次更新目錄

• 1. 誰適合學習這篇指南
• 2. 你將會學到什麼
• 3. 一個小型的React開發環境
• 4. 什麼是state
• 5. Redux解決了什麼問題
• 6. 爲何你應該學習Redux
• 7. 你應該使用Redux嗎
• 8. 開始認識Redux的store
• 9. 開始認識Redux的reducers
• 10. 開始認識Redux的actions

正文

當我第一次學習Redux的時候，我但願找到最簡單的教程。

儘管網上有大量的教程，我卻依然沒法理解Redux的一些概念

我知道什麼是state, 可是ations, creators, 和reducers又是什麼呢?我對此一頭霧水

最重要的是，我依然不知道怎麼將React和Redux結合起來

這些天，我開始寫我本身的Redux教程，所以，我也學到了不少， 經過寫這個指南，我自學了Redux的基礎，我但願這份教程能夠幫助到那些想要學習React和Redux的人

誰適合學習這篇指南

下面的Redux教程正是爲這些人準備的：

• 你已經很好地掌握了Javascript, ES6和React
• 你指望用最簡單的方式學會Redux

你將會學到什麼

接下來的指南中你將會學到:

1. 什麼是Redux
2. 怎樣在React中使用Redux

一個小型的React開發環境

在開始以前，肯定你有一個React的開發環境

你能夠參照我另一篇教程如何搭建React, webpack, 和Babel環境, 或者你也能夠用create-react-app腳手架來搭建

什麼是state

爲了理解Redux，你必選先理解state

若是你以前使用過React, 那麼你對state這個術語就不會陌生了

好比你以前已經寫過相似於下面的有狀態的React組件：

import React, { Component } from "react";
class ExampleComponent extends Component {
  constructor() {
    super();
    this.state = {
      articles: [
        { title: "React Redux Tutorial for Beginners", id: 1 },
        { title: "Redux e React: cos'è Redux e come usarlo con React", id: 2 }
      ]
    };
  }
  render() {
    const { articles } = this.state;
    return <ul>{articles.map(el => <li key={el.id}>{el.title}</li>)}</ul>;
  }
}
複製代碼

一個有狀態的React組件是一個javascrit的ES6的類class

每一個有狀態的React組件有它本身的狀態

在React組件中，狀態state管理數據，組件可能將數據渲染，顯示給用戶

狀態在響應行爲和事件的時候可能會發生變化， 在React中，組件能夠經過setState更新本身的狀態

可是，狀態究竟是什麼，這個術語state並無綁定在React中，狀態一直在你身邊，即便最簡單的JavaScript應用都有狀態，考慮下面的例子：

用戶點擊了一個按鈕

最上層出現了一個彈框

看看，在這個微不足道的交互中就有一個狀態，咱們必須處理

咱們能夠用一個JavaScript 對象來描述初始狀態

var state = {
  buttonClicked: 'no',
  modalOpen: 'no'
}
複製代碼

當用戶點擊按鈕以後，這個對象就變成了

var state = {
  buttonClicked: 'yes',
  modalOpen: 'yes'
}
複製代碼

除了將這些狀態儲存在一個對象中，你如何跟蹤JavaScript的這些狀態？是否有一個庫能夠幫咱們更可靠地追蹤這些狀態？

Redux解決了什麼問題

一個典型的Javascript應用充滿了狀態， 例如：

• 用戶看到了什麼（data）
• 咱們在獲取什麼數據
• 咱們展現給用戶的url是什麼
• 在頁面裏面選中了哪些條目
• 應用中是否有錯誤？這個也是狀態

狀態在Javascript中無處不在， 你能夠想象一下一個React應用有多少狀態嗎？

固然，只要你的應用一直保持很小，你能夠用一個父組件來維持這些狀態，可是當你給你的應用添加更多行爲的時候，事情就變得棘手了。

有時候，咱們可能但願持續地跟蹤而且獲取到狀態的變化，可是，前端開發者不該該處理這個業務邏輯， 因此還有什麼可選方案來管理React組件的狀態呢？

** Redux**就是其中之一 Redux解決了一個剛開始的時候可能不那麼明顯的難題，它給了每一個React組件所須要的狀態

Redux在一個地方維持狀態

固然，使用Redux, 獲取和管理狀態就獨立於React以外了, 這種方式的好處剛開始可能不是那麼明顯，當你愈來愈瞭解Redux的時候，好處就會變得愈來愈清晰

接下來，咱們來看看你爲何應該學習Redux以及何時應該在你的應用中使用Redux，首先先來了解爲何你應該學習Redux

爲何你應該學習Redux

你是否想學習Redux可是殊不知從何學起，Redux讓大多數開始學習的人望而卻步，可是你不該該被嚇到，Redux並無那麼難，關鍵是：不要急着去學Redux，除非你對此有目標和熱情，你才應該開始學習它

彆着急， 我開始學習Redux是由於：

• 我有百分百的興趣瞭解Redux的工做原理
• 我迫切地但願提升個人React技能
• React和Redux結合是十分廣泛的
• Redux是通用獨立的框架，一旦學會了，能夠處處使用(vue, Angular)

那麼，Redux是一個好的彙報嗎？狀態遍及在Javascript應用中，因此狀態管理在JavaScript 中一直是個未解決的難題

另外一個事實就是：真正的JavaScript應用大多數都是使用狀態管理庫

那麼Redux在將來會消失嗎？ 有這種可能，可是這種模式將會長存，它對你前端開發事業極爲寶貴

最後，學習Redux或者相關的狀態管理庫是必須的，即便學習曲線很陡峭

你應該使用Redux嗎

使用Redux,Flux或者Mobx來管理狀態徹底取決於你

可能你根本不須要這些庫，使用它們的代價就是，他們在你的應用中加了一層抽象

可是我更傾向於認爲Redux是一個有用的投資，而不是成本

另一個開始學習Redux的人常見的問題就是：怎麼知道何時你的應用須要使用Redux？

若是你認爲沒有不二法則來肯定你何時須要使用Redux來管理狀態， Redux也給JavaScript開發者提供了不少便利， 調試，action重放等等

當我開始一個React項目的時候，我老是控制不住直接將Redux加入到項目中，可是做爲開發者，咱們可能就會讓代碼臃腫了

因此，何時你猜應該將Redux添加到你的項目中？

在挑選Redux以前，先花點時間來探索下可選的模式， 特別是須要深刻理解React的state和props

Dave Ceddia有一篇很好的文章children props as an alternative before reaching for Redux，裏面有不少關於用子組件的props來做爲Redux代替方案的看法

不要忘記就算以後添加了Redux , React項目也能夠很容易地被重構

我總結的你須要考慮使用Redux的狀況以下：

• 不少React組件須要獲取一樣的狀態，可是沒有任何父子關係
• 用props一層層往下傳遞狀態給多個組件 讓你棘手了

不用擔憂，若是上面的狀況對你沒有任何意義，Dan Abramov曾經說過，「Flux就是眼鏡同樣，當你須要他們的時候你會知道的」

在進一步深刻以前，你須要花店時間理解Redux解決了什麼問題以及你是否有動力去學習它

注意，Redux對小型應用沒有那麼游泳，在大型應用中它纔會大放光彩，不管如何， 即便你當前不是在開發大型應用，學習Redux也不會有壞處

接下來，咱們將開始介紹一些概念

• Redux基本原則
• Redux和React結合

再一次重申，肯定你搭建好了React的開發環境：你能夠跟着 How to set up React, webpack, and Babel這個教程來，或者使用create-react-app腳手架來搭建

開始認識Redux的store

Actions, Reducers,我對這些仍是有幾分瞭解的，可是有件事我不明白：這些東西是怎麼聚合在一塊兒的？

在Redux中store精心安排了全部的東西，和我重複一遍：store

store對於Redux來講就像人的大腦同樣：它是某種魔法

Redux的store是根基性的東西，整個應用的狀態存在store之中

轉到你的React開發環境，安裝Redux:

npm i redux --save-dev
複製代碼

爲store建立一個目錄

mkdir -p src/js/store
複製代碼

在src/js/store中建立一個新文件index.js，初始化store

// src/js/store/index.js
import { createStore } from "redux";
import rootReducer from "../reducers/index";
const store = createStore(rootReducer);
export default store;
複製代碼

從上面的代碼你能夠看出，store是createStore的返回結果，createStore是一個函數，來自redux庫

createStore接受一個reducer做爲第一個參數，所以咱們傳遞了rootReducer

你也能夠傳遞一個初始的state給createStore ，這對服務端渲染有用，可是如今咱們沒必要關心這個

最重要的概念就是redux的state來自於reducers,咱們再說的清楚點，reducers產生你應用的狀態

瞭解了這個，咱們能夠繼續學習咱們的第一個Redux reducer了

開始認識Redux的reducers

儘管初始的state對服務端渲染有用，在Redux中，state必須從reducers中返回

那麼什麼是reducer呢？

一個reducer是一個JavaScript函數，一個reducer函數接收兩個參數： 當前的state和一個action(立刻咱們會介紹更多關於action的東西)

在一個日常的React組件中，本地的狀態變化是經過setState來改變的， 然而，在Redux中，你不能夠這麼作。 Redux的第三個原則是state是不可變的，而且不能改變他們

這就是爲何reducer必須是純函數，一個純函數是對於一個特定輸入老是會返回一樣輸出的函數

建立一個reducer並不難，它僅僅是一個有兩個參數的JavaScript函數

在咱們的示例中，咱們將會建立一個簡單的reducer,它接受初始的state做爲第一個參數，至於第二個參數，咱們提供一個action,如今reducer除了返回初始的state什麼都不會作

爲根reducer建立一個目錄

mkdir -p src/js/reducers
複製代碼

接着在src/js/reducers裏面建立一個index.js文件

// src/js/reducers/index.js
const initialState = {
  articles: []
};
function rootReducer(state = initialState, action) {
  return state;
};
export default rootReducer;
複製代碼

我承諾保證這篇指南儘量地簡單，這就是爲何咱們的第一個reducer很傻了：它返回初始的state，除此以外，就什麼都沒作了

注意初始的state是怎麼做爲一個默認參數傳遞的

在接下來的章節中，咱們將在裏面添加一個action， 在這裏事情就會變得有趣了

開始認識Redux的actions

毫無疑問，reducers是Redux最重要的概念**，reducers產生應用的狀態**

可是一個reducer是怎麼知道何時產生下一個狀態呢？

Redux的第二個原則就是改變的狀態的惟一方法是發送信號給store, 這個信號就是一個action, 派發action就是一個發送信號的過程

如今，你怎麼改變一個不可變的state,你作不到的，新產生的state是當前state添加了新數據後的一個副本，前一個state根本沒發生變化

這就是你須要知道的東西

要明白，Redux的action僅僅是JavaScript對象，下面是一個action

{
  type: 'ADD_ARTICLE',
  payload: { title: 'React Redux Tutorial', id: 1 }
}
複製代碼

每一個action須要一個type屬性來描述狀態怎樣變化

你也能夠申明一個payload,在上面的例子中，payload是一個新文章article，隨後一個reducer將會將這個新文章添加到當前的state

最佳的實踐是在一個函數裏面包裹每一個action, 這種函數就叫action creator

如今經過建立一個簡單的Redux 的action,咱們能夠把全部的東西都整合在一塊兒了

爲actions建立一個目錄

mkdir -p src/js/actions
複製代碼

而後在這個目錄裏面建立index.js文件

// src/js/actions/index.js
export function addArticle(payload) {
  return { type: "ADD_ARTICLE", payload }
};
複製代碼

type屬性僅僅是一個字符串而已

reducer將會使用這個字符串來肯定怎麼計算出下一個state

因爲字符串很容易打印出錯和重複，所以將action的type申明爲常量更好

這種方式能夠避免很難調試的錯誤

建立一個新目錄

mkdir -p src/js/constants
複製代碼

而後在這個目錄裏面建立一個action-types.js文件

// src/js/constants/action-types.js
export const ADD_ARTICLE = "ADD_ARTICLE";
複製代碼

如今打開src/js/actions/index.js， 而且使用action types來更新action

import { ADD_ARTICLE } from "../constants/action-types";
export function addArticle(payload) {
  return { type: ADD_ARTICLE, payload };
}
複製代碼

咱們還差一步就能夠擁有一個能夠運行的Redux應用了，讓咱們來重構咱們的reducer！

---

華麗的風格線，哈哈 本篇內容翻譯完畢，溜了，肚子餓的呱呱叫了。

附上原文連接 www.valentinog.com/blog/redux/