共計 3417 個字符，預計需要花費 9 分鐘才能閱讀完成。
這篇文章主要介紹“React-Redux 的核心原理是什么”，在日常操作中，相信很多人在 React-Redux 的核心原理是什么問題上存在疑惑，丸趣 TV 小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”React-Redux 的核心原理是什么”的疑惑有所幫助！接下來，請跟著丸趣 TV 小編一起來學習吧！
一、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, {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，傳給一個構造函數，返回一個對象，以屬性形式傳給我們的容器組件。
它共有四個參數 mapStateToProps, mapDispatchToProps, mergeProps 以及 options。
mapStateToProps 的作用是將 store 里的 state（數據源）綁定到指定組件的 props 中 mapDispatchToProps 的作用是將 store 里的 action（操作數據的方法）綁定到指定組件的 props 中 另外兩個方法一般情況下使用不到，這里就不做介紹。。
那么 connect 是怎么將 React 組件與 Redux store 連接起來的呢？其主要邏輯可以總結成以下代碼：
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 的使用
項目中關于 redux 的文件夾目錄如下
拿管理用戶信息數據的需求來舉例
第一步，編寫操作用戶信息的 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 的創建
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 })();到此，關于“React-Redux 的核心原理是什么”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注丸趣 TV 網站，丸趣 TV 小編會繼續努力為大家帶來更多實用的文章！
