這篇文章主要介紹“React-Redux的核心原理是什么”，在日常操作中，相信很多人在React-Redux的核心原理是什么問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”React-Redux的核心原理是什么”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

創(chuàng)新互聯(lián)從2013年成立，先為澗西等服務(wù)建站，澗西等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為澗西企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

一、redux和React-redux的幾個重要概念
1.1 action
Action 是把數(shù)據(jù)從應(yīng)用（這里之所以不叫 view 是因?yàn)檫@些數(shù)據(jù)有可能是服務(wù)器響應(yīng)，用戶輸入或其它非 view 的數(shù)據(jù) ）傳到 store 的有效載荷。它是 store 數(shù)據(jù)的唯一來源。一般來說你會通過 store.dispatch() 將 action 傳到 store。

1.2 reducer
Reducers 指定了應(yīng)用狀態(tài)的變化如何響應(yīng) actions并發(fā)送到 store 的，記住 actions 只是描述了有事情發(fā)生了這一事實(shí)，并沒有描述應(yīng)用如何更新 state。

1.3 store
store就是把a(bǔ)ction和reducer聯(lián)系到一起的對象，store本質(zhì)上是一個狀態(tài)樹，保存了所有對象的狀態(tài)。任何UI組件都可以直接從store訪問特定對象的狀態(tài)。

在 Redux 中，所有的數(shù)據(jù)（比如state）被保存在一個store容器中 ，在一個應(yīng)用程序中只能有一個store對象。當(dāng)一個store接收到一個action，它將把這個action代理給相關(guān)的reducer。reducer是一個純函數(shù)，它可以查看之前的狀態(tài)，執(zhí)行一個action并且返回一個新的狀態(tài)。

1.4 Provider
Provider 其實(shí)就只是一個外層容器，它的作用就是通過配合 connect 來達(dá)到跨層級傳遞數(shù)據(jù)。使用時只需將Provider定義為整個項(xiàng)目最外層的組件，并設(shè)置好store。那么整個項(xiàng)目都可以直接獲取這個store。它的原理其實(shí)是通過React中的[Context]()來實(shí)現(xiàn)的。它大致的核心代碼如下：

import React, {Component} from 'react' import {PropTypes} from 'prop-types'  export default class Provider extends Component {     getChildContext() {         return {store: this.props.store}     }      constructor() {         super()          this.state = {}     }      render() {         return this.props.children     } }  Provider.childContextTypes = {     store: PropTypes.object }

1.5 connect
connect 的作用是連接React組件與 Redux store，它包在我們的容器組件的外一層，它接收上面 Provider 提供的 store 里面的 state 和 dispatch，傳給一個構(gòu)造函數(shù)，返回一個對象，以屬性形式傳給我們的容器組件。

它共有四個參數(shù)mapStateToProps, mapDispatchToProps, mergeProps以及options。

mapStateToProps 的作用是將store里的state（數(shù)據(jù)源）綁定到指定組件的props中 mapDispatchToProps 的作用是將store里的action（操作數(shù)據(jù)的方法）綁定到指定組件的props中 另外兩個方法一般情況下使用不到，這里就不做介紹。。

那么 connect 是怎么將React組件與 Redux store連接起來的呢？其主要邏輯可以總結(jié)成以下代碼：

import {Component} from "react"; import React from "react"; import {PropTypes} from 'prop-types'  const connect = (mapStateToProps, mapDispatchToProps) => (WrappedComponent => {     class Connect extends Component {         constructor() {             super()              this.state = {}          }          componentWillMount() {             this.unSubscribe = this.context.store.subscribe(() => {                 this.setState(mapStateToProps(this.context.store.getState()))             })         }          componentWillUnmount() {             this.unSubscribe()         }          render() {             return <WrappedComponent  {...this.state}                                       {...mapDispatchToProps(this.context.store.dispatch)}/>         }     }      Connect.contextTypes = {         store: PropTypes.object     }     return Connect })  export default connect

二、redux和React-redux的使用
項(xiàng)目中關(guān)于redux的文件夾目錄如下

拿管理用戶信息數(shù)據(jù)的需求來舉例

第一步，編寫操作用戶信息的action

import {USER_INFO} from "../constants/actionTypes"; import store from '../store/store'  export const switchUser = (data) => {     console.log("switchUser()",data);     return () => {         store.dispatch({             type: USER_INFO,             ...data         })     } }

第二步，編寫改變用戶信息并返回新state的reducer

import {USER_INFO} from "../constants/actionTypes";  const redUserInfo = (state = {     userId: 10001,     userName: '',     userOpenid: '',     userPhone: '',     userRole: 0 }, action) => {     if (action === undefined) {         return state     }      switch (action.type) {         case USER_INFO:             return {                 ...state,                 ...action             }         default:             return state     }  }

第三步，完成store的創(chuàng)建

import {createStore} from 'redux' import reducers from '../reducers/index'  let store = createStore(reducers)  export default store

第四步，獲取用戶信息

//配置代碼，通過connect將組件和store連接起來 let mapStateToProps = (state) => ({     userInfo: {...state.redUserInfo} })  let mapDispatchToProps = (dispatch) => ({})  export default connect(mapStateToProps, mapDispatchToProps)(PageClass)  //通過props獲取用戶信息 this.props.userInfo

第五步，修改用戶信息

import {switchUser} from '../../redux/actions/userInfo'  switchUser({     userId: 10001,     userName: '',     userOpenid: '',     userPhone: '',     userRole: 2 })();

到此，關(guān)于“React-Redux的核心原理是什么”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！

網(wǎng)站標(biāo)題：React-Redux的核心原理是什么
新聞來源：http://aaarwkj.com/article12/gppsdc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、外貿(mào)建站、企業(yè)建站、品牌網(wǎng)站制作、定制網(wǎng)站、服務(wù)器托管

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)