腳本之家服務器常用軟件

快捷導航

React?Redux管理庫示例詳解

更新時間：2022年12月20日 14:48:50 作者：單箭頭→

這篇文章主要介紹了如何在React中直接使用Redux,目前redux在react中使用是最多的，所以我們需要將之前編寫的redux代碼，融入到react當中去，本文給大家詳細講解，需要的朋友可以參考下

相同點

state 共享數(shù)據(jù)
流程一致：定義全局state，觸發(fā)，修改state
原理相似，通過全局注入store。

不同點

vuex定義了state、getter、mutation、action四個對象；redux定義了state、reducer、action。
vuex觸發(fā)方式有兩種commit同步和dispatch異步；redux同步和異步都使用dispatch
vuex中state統(tǒng)一存放，方便理解；reduxstate依賴所有reducer的初始值
vuex有g(shù)etter,目的是快捷得到state；redux沒有這層，react-redux mapStateToProps參數(shù)做了這個工作。
vuex中mutation只是單純賦值(很淺的一層)；redux中reducer只是單純設置新state(很淺的一層)。他倆作用類似，但書寫方式不同
vuex中action有較為復雜的異步ajax請求；redux中action中可簡單可復雜,簡單就直接發(fā)送數(shù)據(jù)對象（{type:xxx, your-data}）,復雜需要調(diào)用異步ajax（依賴redux-thunk插件）。
Redux 使用的是不可變數(shù)據(jù)，而Vuex的數(shù)據(jù)是可變的。Redux每次都是用新的state替換舊的state，而Vuex是直接修改
Redux 在檢測數(shù)據(jù)變化的時候，是通過 diff 的方式比較差異的，而Vuex其實和Vue的原理一樣，是通過 getter/setter來比較的

vuex 數(shù)據(jù)交互思維圖：

redux數(shù)據(jù)交互思維圖：

接下來詳細說說redux:

配置總共分為三部分

一.actions：負責收集并向reduces提交state的變化,自身可分為兩部分actions類型和actions函數(shù)創(chuàng)建

（1）actions —type 常量類型，主負責向reduces

（2）actions —fn 函數(shù)創(chuàng)建組件中觸發(fā)提交函數(shù)

二.reducers 更新state狀態(tài)，可根據(jù)state數(shù)據(jù)類型拆分成單個reducer，把reducers細化,后面通過集合構(gòu)建出最終的大state

三.全局只需要有一個store，不需要像網(wǎng)站中資料介紹的在每一個組件一樣去初始化一個store，一個項目集合在這初始化一次就可以；

store.dispatch() // 提交

store.sbuscribe() // 組件中監(jiān)聽reducer的變化，即state的變化回調(diào)

store.getState() // 獲取state的值，通常和store.sbuscribe() 結(jié)合使用

源碼部分：

目錄配置

actions:

index.js

/* actions 類型
* TYPE_GET_LIST 這是一個關(guān)于點擊類型獲取列表的定義
*/
import {TYPE_GET_LIST,IS_LOGIN} from "./type"
/* actions 創(chuàng)建函數(shù)
*actions 創(chuàng)建函數(shù)和actions是兩個概念
*/
export function getType(opt){
  return {type: TYPE_GET_LIST, opt}
}
export function isLogin(flag){
  return {type: IS_LOGIN, flag}
}

type.js

/* actions 類型type */
export const TYPE_GET_LIST = "TYPE_GET_LIST";
export const IS_LOGIN = "IS_LOGIN";
/* 其他常量 */
export const otherType = {
  TO_DO: "TO_DO"
}

reducers

index.js

/**
 * redux 管理入口
 */
import {combineReducers} from "redux"
import userBasketReducer from './userReducer';
import {TYPE_GET_LIST, IS_LOGIN} from "../actions/type"
/* 不同數(shù)據(jù)結(jié)構(gòu)的單個state */
function typeInfo(state={}, action) {
  console.log(state, action, "這個是tyInfo的信息");
  switch (action.type) {
    case TYPE_GET_LIST: return Object.assign({}, state, {typeInfo: action.opt});
    default: return state;
  }
};
function isLogin(state=false, action) {
  console.log(state, action);
  switch (action.type) {
    case IS_LOGIN: return Object.assign({}, state, {isLogin: action.flag});
    case ....; // 
    default: return state;
  }
};
// 匯總成一個大的state,供全局使用
const reducers = combineReducers({
  userBasket: userBasketReducer,
  typeInfo,
  isLogin
});
export default reducers;

store

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

至此，一個完整的redux搭建成功，需要拓展什么樣的業(yè)務只需要根據(jù)自己的業(yè)務定義常量函數(shù)名和創(chuàng)建函數(shù)就可以了，然后通過在組件中dispatch分發(fā)的方式提交，就能直接掛載到state對象上供組件間相互使用。

接下來看看如何在組件中使用：

如何提交：

在組件中引入store庫，和函數(shù)創(chuàng)建的方法

import {isLogin} from "../../redux/actions"
import store from "../../redux/store";
// 提交
store.dispatch(isLogin({flag: true})) // 登錄成功賦值更新已登錄邏輯

如何動態(tài)獲取監(jiān)聽改變的值監(jiān)聽,全局監(jiān)聽state的值

import store from "../../redux/store";
store.subscribe(() => {
			const { selectedFolderId } = store.getState().selectedFolderId;
			this.setState({
				checkFolderId: selectedFolderId
			});
	});

Redux 將組件區(qū)分為容器組件和 UI 組件

前者會處理邏輯
后者只負責顯示和交互，內(nèi)部不處理邏輯，狀態(tài)完全由外部掌控

Provider

看我上邊那個代碼的頂層組件4個字。對，你沒有猜錯。這個頂級組件就是Provider,一般我們都將頂層組件包裹在Provider組件之中，這樣的話，所有組件就都可以在react-redux的控制之下了,但是store必須作為參數(shù)放到Provider組件中去

<Provider store = {store}>
    <App />
<Provider>

這個組件的目的是讓所有組件都能夠訪問到Redux中的數(shù)據(jù)。

connect 的使用：

connect(mapStateToProps, mapDispatchToProps)(MyComponent)

mapStateToProps 把Redux中的數(shù)據(jù)映射到React中的props中去。

如：

    const mapStateToProps = (state) => {
      return {
      	// prop : state.xxx  | 意思是將state中的某個數(shù)據(jù)映射到props中
        foo: state.bar
      }
    }

組件中：

class Foo extends Component {
    constructor(props){
        super(props);
    }
    render(){
        return(
        	// 這樣子渲染的其實就是state.bar的數(shù)據(jù)了
            <div>this.props.foo</div>
        )
    }
}
Foo = connect()(Foo);
export default Foo;

mapDispatchToProps 把各種dispatch也變成了props讓你可以直接使用

const mapDispatchToProps = (dispatch) => { // 默認傳遞參數(shù)就是dispatch
  return {
    onClick: () => {
      dispatch({
        type: 'increatment'
      });
    }
  };
}

class Foo extends Component {
    constructor(props){
        super(props);
    }
    render(){
        return(
        	
             <button onClick = {this.props.onClick}>點擊increase</button>
        )
    }
}
Foo = connect()(Foo);
export default Foo;

可以直接通過this.props.onClick，來調(diào)用dispatch,這樣子就不需要在代碼中來進行store.dispatch了

如果哪兒不懂可以留言我會快速回復，拆分的比較細，有些地方可能沒必要拆分，完全是為了自己練習和做個筆記，也方便大家閱讀

到此這篇關(guān)于React Redux管理庫示例詳解的文章就介紹到這了,更多相關(guān)React Redux內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: