「 React 」redux

kevin 發布于2019-08-23 17:01 / 430人閱讀

摘要：簡介是一個獨立專門用于做狀態管理的庫不是插件庫它可以用在等項目中但演變至今基本與配合使用作用集中式管理應用中多個組件共享的狀態如果不是比較復雜的組件間通信的情況下建議還是不使用因為會造成代碼量的上升和復雜關鍵模塊保存狀態的主要部分共享的狀態

簡介

1) redux是一個獨立專門用于做狀態管理的JS庫(不是react插件庫)
2) 它可以用在react, angular, vue等項目中, 但演變至今基本與react配合使用
3) 作用: 集中式管理react應用中多個組件共享的狀態

Tip:redux如果不是比較復雜的組件間通信的情況下,建議還是不使用,因為會造成代碼量的上升和復雜

關鍵模塊

Store

保存狀態的主要部分,共享的狀態數據保存在該對象中

Action Creators

工廠函數,主要用來生成action對象,傳輸更新的狀態數據.

Reducers

接收action對象,對之前的狀態和action中的新狀態進行操作,并且返回新的結果存在store中.

關鍵函數

store.createStore()

創建store對象,參數傳入reducers進行綁定.

store.dispatch()

分發action對象,傳入reducers,進行狀態的更新.

store.subscribe()

監聽事件,當有狀態改變時,會自動調用監聽的方法(一般用來重新渲染方法)

使用示例 1.下載安裝

//此處我使用的是yarn,后面兩個后面介紹
yarn add redux  react-redux  redux-thunk

2.創建文件目錄

3.各部分內容

store.js

import { createStore,applyMiddleware } from "redux"
import reducer from "./reducer"   //導入reducer進行綁定
import thunk from "redux-thunk"    //這是一個異步解析實現

export default createStore(reducer,applyMiddleware(thunk)); // 導出store對象

action-creator.js

import { INCREASE, DECREASE } from "./action-type"  //全局命名聲明文件

// 不同的操作,返回action對象,type為標識,data為傳輸的數據
export const incresement = (data) => ({ type:INCREASE,data:data})  

export const decresement = (data) =>({type:DECREASE,data:data})

//模擬異步操作,返回的是主動進行分發操作的一個函數
export const incresementAsync = (data) => {
    return (dispatch) => {
      setTimeout(()=>{
        dispatch(incresement(data))
      },1000)
    }
    
}

reducer.js

import {INCREASE,DECREASE} from "./action-type"

//當有dispatch被調用時,會自動來遍歷該模塊中的所有函數,并進行匹配.
//previousState為之前的狀態,action中包含著新的數據
export default function number(previousState = 0,action) {
    switch(action.type){
        case INCREASE:
        return previousState + action.data;
        case DECREASE:
        return previousState - action.data;
        default:
        return previousState;
    }
}

action-type.js

//聲明定義了一些命名
export const INCREASE = "INCREASE";

export const DECREASE = "DECREASE";

App.js

import React, { Component } from "react"
import { connect } from "react-redux"
import { incresement, decresement,incresementAsync } from "./redux/action-creator"
class App extends Component {

// 進行更新操作
  increase = () => {
    this.props.incresement(1)
  }

  decrease = () => {
    this.props.decresement(1)
  }

  increaseAsync = () => {
    this.props.incresementAsync(1)
  }

  render() {
    return (
      
      //獲取狀態值
        click {this.props.number} times
        
        
        
      
    )
  }
}
//關鍵在這里,這是簡寫的方式.
//得益于react-redux,將創建action對象和dispatch的操作都進行了封裝簡化,并且封裝了獲取狀態值.
//不管是進行獲取還是更新操作,都封裝進了props屬性中.
export default connect(
  (state) => ({ number: state }),
  { incresement, decresement,incresementAsync }
)(App)

index.js

import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux"
import store from "./redux/store"
import App from "./App";

// 用Provider包裝,就省略了用subscribe()監聽的回調.
ReactDOM.render(, document.getElementById("root"));

react-redux

專門用來簡化redux在react中使用的一個庫.
它將原生redux的.getState(),創建action對象,dispatch等方法進行了封裝.提供如上代碼的簡寫方式.

redux-thunk

用來幫助解析異步操作.
只需要在創建store對象的時候用中間件包裝的方式作為第二個參數傳入即可.

擴展調試工具

redux-devtools-extension.

在谷歌商店中裝好這個插件,然后在創建store對象的時候

import { createStore, applyMiddleware } from "redux";
import { composeWithDevTools } from "redux-devtools-extension";

const store = createStore(reducer, composeWithDevTools(
  applyMiddleware(...middleware),
  // other store enhancers if any
));

總結

redux在復雜項目中比較適合使用.它保存著一些多處需要共享的狀態數據,在整個項目中比較方便進行狀態數據的更新以及獲取.

避免了一些層級比較多或者跨越了比較多級的同級兄弟組件需要互相通信的復雜過程.

GPU云服務器云服務器 react-redux React_Redux_Appointm react-router-redux Redux

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/103668.html

react 前端項目技術選型、開發工具、周邊生態

摘要：更多參考通過庫掌握函數組件有些時候，我們想要動態的加載一些組件按需加載，比如在一個單頁面應用中頁面的組件頁面的組件頁面的組件只有真正要實例化當前頁面的時候，才會去加載相應的組件。 react 前端項目技術選型、開發工具、周邊生態聲明：這不是一篇介紹 React 基礎知識的文章，需要熟悉 React 相關知識主架構：react, react-router, redux, redux...

hersion 2019-08-30 15:54 評論0 收藏0
react 前端項目技術選型、開發工具、周邊生態

摘要：更多參考通過庫掌握函數組件有些時候，我們想要動態的加載一些組件按需加載，比如在一個單頁面應用中頁面的組件頁面的組件頁面的組件只有真正要實例化當前頁面的時候，才會去加載相應的組件。 react 前端項目技術選型、開發工具、周邊生態聲明：這不是一篇介紹 React 基礎知識的文章，需要熟悉 React 相關知識主架構：react, react-router, redux, redux...

kidsamong 2019-08-23 14:07 評論0 收藏0
React手稿之 React-Redux

摘要：屬性是必須的。需要一個與的一致。必須在的返回原。調試插件日志安裝組件。然后加入到中即可例如擴展程序需要在應用市場安裝然后在中使用增強功能將加入即可在線實例推薦閱讀手稿 React-Redux Redux Action function addTodo(text) { return { type: ADD_TODO, text } } type 屬性是必須的。...

Freelander 2019-08-23 12:57 評論0 收藏0
react-redux

摘要：主要用于構建，被認為是中的視圖。高效通過對的模擬，最大限度地減少與的交互。也就是說，用戶負責視覺層，狀態管理則是全部交給它。該回調函數必須返回一個純對象，這個對象會與組件的合并。 React 定義： React 是一個用于構建用戶界面的 JAVASCRIPT 庫。React主要用于構建UI，React 被認為是 MVC 中的 V（視圖）。特點：聲明式設計 ?React采用聲明范式...

sanyang 2019-08-20 16:22 評論0 收藏0
react開發教程（十）redux結合react

摘要：描述和之間沒有關系。但是還是比較適合和搭配的，因為允許你以的形式來描述界面，而非常擅長控制的變化。應用中應有且僅有一個。只需要在渲染根組件時使用即可。創建上一篇開發教程九基礎描述 Redux 和 React 之間沒有關系。Redux 可以搭配 React、Angular 甚至純 JS。但是 Redux 還是比較適合和 React 搭配的，因為 React 允許你以 state 的形式...

jsliang 2019-08-02 15:58 評論0 收藏0