前言

老外寫技術文章真是叼，這是國外的一個程序員寫的一個簡單易懂,循序漸進的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

你將會學到什么

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

什么是Redux

怎樣在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/

轉載于:https://juejin.im/post/5cd68669518825690233ccf9

總結

以上是生活随笔為你收集整理的[译】Redux入门教程（一）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。