逆戰之react中redux的原理及使用

react作為乙個熱門框架，當乙個react專案元件層級越來越深，頁面越來越多的時候，資料在各個元件層級和頁面之間傳遞的需求就會比較多，很多變數也需要做成可全域性管理的。在這個時候，redux和react-redux的使用就很有必要了。它們能幫助我們很方便的進行專案全域性性的資料管理。

下面，就寫一下我自己對 redux 和 react-redux 的學習以及使用的心得，權當是對學習過程的一種記錄和分享。

一、redux和react-redux的幾個重要概念

1.1 action

action 是把資料從應用（這裡之所以不叫 view 是因為這些資料有可能是伺服器響應，使用者輸入或其它非 view 的資料）傳到 store 的有效載荷。它是 store 資料的唯一**。一般來說你會通過 store.dispatch() 將 action 傳到 store。

1.2 reducer

reducers 指定了應用狀態的變化如何響應 actions併發送到 store 的，記住 actions 只是描述了有事情發生了這一事實，並沒有描述應用如何更新 state。

1.3 store

store就是把action和reducer聯絡到一起的物件，store本質上是乙個狀態樹，儲存了所有物件的狀態。任何ui元件都可以直接從store訪問特定物件的狀態。

在 redux 中，所有的資料（比如state）被儲存在乙個store容器中，在乙個應用程式中只能有乙個store物件。當乙個store接收到乙個action，它將把這個action**給相關的reducer。reducer是乙個純函式，它可以檢視之前的狀態，執行乙個action並且返回乙個新的狀態。

1.4 provider

provider 其實就只是乙個外層容器，它的作用就是通過配合 connect 來達到跨層級傳遞資料。使用時只需將provider定義為整個專案最外層的元件，並設定好store。那麼整個專案都可以直接獲取這個store。它的原理其實是通過react中的context來實現的。它大致的核心**如下：

import react,  from 'react'
import from 'prop-types'
export default class provider extends component 
}constructor() 
}render() 
}provider.childcontexttypes =

1.5 connect

connect 的作用是連線react元件與 redux store，它包在我們的容器元件的外一層，它接收上面 provider 提供的 store 裡面的 state 和 dispatch，傳給乙個建構函式，返回乙個物件，以屬性形式傳給我們的容器元件。

它共有四個引數mapstatetoprops, mapdispatchtoprops, mergeprops以及options。

mapstatetoprops 的作用是將store裡的state（資料來源）繫結到指定元件的props中

mapdispatchtoprops 的作用是將store裡的action（運算元據的方法）繫結到指定元件的props中

另外兩個方法一般情況下使用不到，這裡就不做介紹。。

那麼 connect 是怎麼將react元件與 redux store連線起來的呢？其主要邏輯可以總結成以下**：

import  from "react";
import react from "react";
import from 'prop-types'
class connect extends component 
}componentwillmount() )
}componentwillunmount() 
render() />}
}connect.contexttypes = 
return connect
})export default connect

二、redux和react-redux的使用

專案中關於redux的資料夾目錄如下

拿管理使用者資訊資料的需求來舉例

第一步，編寫操作使用者資訊的action

import  from "../constants/actiontypes";
import store from '../store/store'
export const switchuser = (data) => )
}}

第二步，編寫改變使用者資訊並返回新state的reducer

import  from "../constants/actiontypes";
const reduserinfo = (state = , action) => 
switch (action.type) 
default:
return state
}}

第三步，完成store的建立

import  from 'redux'
import reducers from '../reducers/index'
let store = createstore(reducers)
export default store

第四步，獲取使用者資訊

//配置**，通過connect將元件和store連線起來
let mapstatetoprops = (state) => (
})let mapdispatchtoprops = (dispatch) => ({})
export default connect(mapstatetoprops, mapdispatchtoprops)(pageclass)
//通過props獲取使用者資訊
this.props.userinfo

第五步，修改使用者資訊

import  from '../../redux/actions/userinfo'
switchuser()();

至此就完成了redux+react-redux的乙個簡單使用流程，如有不足，還望大家指證。

逆戰之react中redux的原理及使用

react基礎（逆戰1913）

react中redux的使用

react 中的redux的使用

逆戰之react中redux的原理及使用

react基礎（逆戰1913）

react中redux的使用

react 中的redux的使用

相關推薦