react-redux 開發實踐與學習分享

imccl 發布于2019-08-21 16:42 / 851人閱讀

摘要：簡介是一個狀態管理的庫，由基礎上開發出來，與的主要區別是只有一個，關于，后文會詳述。這個函數接受四個參數，它們分別是，，和。之前在注冊頁面，如果沒有滿足相關條件，則觸發的行為。具體定義了項目中觸發的行為類別，通過屬性來區別于不同的行為。

redux簡介

redux是一個js狀態管理的庫，由flux基礎上開發出來，與flux的主要區別是只有一個store，關于store，后文會詳述。在各大框架中均可使用，當然各個框架也有自己再度封裝的狀態管理庫，如angular的ngrx，vue的vuex，而本文主要介紹的是react的react-redux。

示例介紹

本次演示的示例，是一個微信注冊頁面，主要想通過react-redux實現的功能是，當輸入不合法的注冊信息時，頂部出現錯誤提示信息，即：

通過路由進入主頁面，主頁面渲染的dom代碼為：

 render() {
        // 這個組件是一個包裹組件，所有的路由跳轉的頁面都會以this.props.children的形式加載到本組件下
     const {msg} = this.props;
        return (
            
                {msg.text}
                {this.props.children}
            
        );
    }

可以看到主頁面比更沒有直接寫入注冊頁面，而由錯誤提示部分加子路由入口組成，注冊頁面是通過子路由嵌套進來的，而又因為react的數據沒有向上回溯的能力（即單項數據流），因此這里選擇狀態管理的方式去顯示錯誤提示信息。

開講react-rudex

最初看文檔的時候，有一種體驗，就是各個模塊（action,reducer,store）等等，都看明白了，但是具體想去完成功能的時候還是一臉懵逼，不知道如何下手，于是這次為了去更好的講解示例，我決定反著來，先從示例入手，再去引出那些概念。

關聯rudex和頁面組件-connect

從之前主頁面的代碼可以看到，錯誤信息的顯示是由組件的props傳進來的，而主頁面是如何獲取相關的props的呢，答案是通過一個connect的函數。

connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])

connect是react組件做狀態管理的核心，它將組件和redux中的所有狀態值連接起來。這個函數接受四個參數，它們分別是 mapStateToProps，mapDispatchToProps，mergeProps和options。

mapStateToProps(state, ownProps)

第一個參數是獲取redux倉庫中的值的一個函數。為了方便快速理解，我們可以簡單粗暴的認為他是js中getter，setter中的getter，這是一個用來從redux中獲取值的函數，這個函數返回的值，可以在當前組件的props中拿到。

比如現在主頁面需要知道，當前redux倉庫中是否顯示錯誤提示的相關信息時，有如下代碼：

const mapStateToProps = (state) => {
    return {
        msg: state.tipMsg,//取reducer中的tipMsg
    }
}

export default connect(mapStateToProps)(Main);

state就是redux中儲存值的大對象，而現在需要的錯誤信息就是存儲在tipMsg的字段當中。因為在主頁面只會取值，而不會設置值，因此connect只需要這一個函數足夠。

ownProps這里還可以穿第二個參數，第二個參數特指當前組件的props，可以用來做信息對比。本例沒有用到。

mapDispatchToProps(dispatch, ownProps)

如果說mapStateToProps是一個getter的話，那么mapDispatchToProps就是一個setter，他觸發了redux的相關行為，使得rudex可以保存記錄一些你想要記錄改變的狀態和值。

具體到本例中，觸發redux行為的操作在注冊頁面，因此注冊頁面添加如下代碼：

const mapDispatchToProps = (dispatch) => {
    return bindActionCreators({
        showTip: showTip//第二個showTip是一個action
    }, dispatch);
}

export default connect((state) => state, mapDispatchToProps)(Main);

可以看到當注冊頁面執行showTip的函數時，就會觸發redux中的showTip的操作，這個操作是提前定義好的。這里有兩個showTip，第一個是指當前頁面的函數名，第二個是指redux中定義好的行為，這兩個showTip沒有必要的聯系，只是作為一個關系映射，名字可以不一樣。

mergeProps(stateProps, dispatchProps, ownProps)

這個參數的作用是表示把redux中的props（即當中存儲的值）和當前組件的props做合并，默認都是要合并的，可以忽略這個屬性。

options

一個配置項屬性，可以做相關的配置。自行翻譯吧~。
[options] (Object) If specified, further customizes the behavior of the connector.

[pure = true] (Boolean): If true, implements shouldComponentUpdate and shallowly compares the result of mergeProps, preventing unnecessary updates, assuming that the component is a “pure” component and does not rely on any input or state other than its props and the selected Redux store’s state. Defaults to true.

[withRef = false] (Boolean): If true, stores a ref to the wrapped component instance and makes it available via getWrappedInstance() method. Defaults to false.

store

這個就是之前一直提到的redux的倉庫。redux的管理的數據都存儲在store中。
我們只需要知道，store就是一個存儲倉庫，react-redux只有一個store，所有的東西都存在這里，想要在react組件中用他首先需要去根頁面把它注入進去。需要在根節點寫入如下代碼：

import React from "react"; 
import {render} from "react-dom"; // 渲染組件時需要
import {Provider} from "react-redux"; // react和redux連接的橋梁，就是這個Provider
import store from "./redux/store/store"; // 引入sotre
import route from "./router/route"; // 所有定義好的路由

// 創建根組件
render(
    
        {route}
    ,
    document.body.appendChild(document.createElement("div"))
);

這是鏈接redux，使組件可以訪問倉庫的基礎。

action

export const showTip = (item) => {
    return {
        type: "SHOW_TIP",
        item
    }
}

之前在注冊頁面，如果沒有滿足相關條件，則觸發redux的行為。而這個行為就是action。action具體定義了項目中觸發的行為類別，通過type屬性來區別于不同的行為。對應到connect的函數參數中，就是mapDispatchToProps需要去save或者說change什么樣的行為。

reducer

const tipMsg = (state = {text: "", show: false}, action) => {
    switch (action.type) {
        case "SHOW_TIP":
            return Object.assign({}, {
                text: action.item.text,
                show: action.item.show
            });
        default:
            return state;
    }
}

一個純函數，通過判斷是什么樣的行為，來對相關的state做更改，這中間是不含任何變量的，即只要確定輸入，就能知道輸出。在mapStateToProps這個取值函數中，取的也就是相關reducer中返回的值。
觸發相關action后的主頁控制臺：

至此，就完成了react-redux對于父子組件的通信，由子組件向上推送信息至父組件，觸發相關的操作。

項目地址：https://github.com/jiwenjiang...
（ps：注意此項目由yarn管理，而不是npm）

GPU云服務器云服務器機器學習與業務實踐開發實踐學習實踐微服務架構與實踐

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/88623.html

Rematch: Redux 的重新設計

摘要：沿著管道有兩組偵聽器中間件和訂閱。中間件是可以偵聽傳入的動作的函數，支持諸如，或偵聽器之類的工具。將視為一個帶有更新前更新后鉤子的全局對象，以及能夠以簡單的方式合成新狀態。應將兩者視為一體，并且不再需要文件導出類型的字符串。難道現在狀態管理不是一個可以解決的問題嗎?直觀地說，開發人員似乎知道一個隱藏的事實:狀態管理的使用似乎比需要的更困難。在本文中，我們將探討一些你可能一直在問自己的...

Taste 2019-08-26 13:47 評論0 收藏0
深入理解JavaScript

摘要：深入之繼承的多種方式和優缺點深入系列第十五篇，講解各種繼承方式和優缺點。對于解釋型語言例如來說，通過詞法分析語法分析語法樹，就可以開始解釋執行了。 JavaScript深入之繼承的多種方式和優缺點 JavaScript深入系列第十五篇，講解JavaScript各種繼承方式和優缺點。寫在前面本文講解JavaScript各種繼承方式和優缺點。但是注意：這篇文章更像是筆記，哎，再讓我...

myeveryheart 2019-08-22 13:46 評論0 收藏0
react+react-router+react-redux全家桶小項目開發過程分享

摘要：項目地址下載完項目然后即可基于的項目，主要是為了學習實戰。數據都是固定的，從餓了么接口臨時抓的，模擬了一個的異步數據延遲，感謝餓了么。詳細信息可以看上面的官方文檔，我這里就簡單說一下我這個項目的應用。 react-ele-webapp 項目地址：https://github.com/kliuj/reac... run 下載完項目npm install然后npm run dev 即可 ...

zzir 2019-08-20 15:11 評論0 收藏0
React-redux基礎

摘要：簡介創建的函數，返回一個對象，包含等方法合并多個中間件處理，在實際的前調用一系列中間件，類似于綁定和函數式編程中常見的方法，介紹官方提供的綁定庫。前言在學習了React之后，緊跟著而來的就是Redux了~ 在系統性的學習一個東西的時候，了解其背景、設計以及解決了什么問題都是非常必要的。接下來記錄的是，我個人在學習Redux時的一些雜七雜八~ Redux是什么通俗理解 h...

jsyzchen 2019-08-23 15:09 評論0 收藏0
【譯】Redux 還是 Mobx，讓我來解決你的困惑！

摘要：我現在寫的這些是為了解決和這兩個狀態管理庫之間的困惑。這甚至是危險的，因為這部分人將無法體驗和這些庫所要解決的問題。這肯定是要第一時間解決的問題。函數式編程是不斷上升的范式，但對于大部分開發者來說是新奇的。規模持續增長的應原文地址：Redux or MobX: An attempt to dissolve the Confusion 原文作者：rwieruch 我在去年大量的使用...

txgcwm 2019-08-22 11:06 評論0 收藏0