React-Redux的核心原理是什么

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

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

一、redux和React-redux的幾個(gè)重要概念
1.1 action
Action 是把數(shù)據(jù)從應(yīng)用（這里之所以不叫 view 是因?yàn)檫@些數(shù)據(jù)有可能是服務(wù)器響應(yīng)，用戶輸入或其它非 view 的數(shù)據(jù) ）傳到 store 的有效載荷。它是 store 數(shù)據(jù)的唯一來(lái)源。一般來(lái)說(shuō)你會(huì)通過(guò) 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)系到一起的對(duì)象，store本質(zhì)上是一個(gè)狀態(tài)樹，保存了所有對(duì)象的狀態(tài)。任何UI組件都可以直接從store訪問(wèn)特定對(duì)象的狀態(tài)。

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

1.4 Provider
Provider 其實(shí)就只是一個(gè)外層容器，它的作用就是通過(guò)配合 connect 來(lái)達(dá)到跨層級(jí)傳遞數(shù)據(jù)。使用時(shí)只需將Provider定義為整個(gè)項(xiàng)目最外層的組件，并設(shè)置好store。那么整個(gè)項(xiàng)目都可以直接獲取這個(gè)store。它的原理其實(shí)是通過(guò)React中的[Context]()來(lái)實(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è)構(gòu)造函數(shù)，返回一個(gè)對(duì)象，以屬性形式傳給我們的容器組件。

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

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

那么 connect 是怎么將React組件與 Redux store連接起來(lái)的呢？其主要邏輯可以總結(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的文件夾目錄如下

React-Redux的核心原理是什么

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

第一步，編寫操作用戶信息的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

第四步，獲取用戶信息

//配置代碼，通過(guò)connect將組件和store連接起來(lái) let mapStateToProps = (state) => ({     userInfo: {...state.redUserInfo} })  let mapDispatchToProps = (dispatch) => ({})  export default connect(mapStateToProps, mapDispatchToProps)(PageClass)  //通過(guò)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)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！

網(wǎng)站標(biāo)題：React-Redux的核心原理是什么
新聞來(lái)源：http://muchs.cn/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)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

h5響應(yīng)式網(wǎng)站建設(shè)