redux入門事例

cheng10 發布于2019-08-22 16:28 / 2369人閱讀

摘要：中定義來各個要做的事情。代碼定義把封裝成一個方法，這樣用的時候不用每次定義，避免出錯入口文件封裝成方法，方便下面的的訂閱調用每當時，訂閱的函數就會執行現在有機關槍把。通過的來觸發，中訂閱的事件就會執行。觸發，獲取的值。

環境準備

為了方便，這里使用create-react-app搭建react環境

create-react-app mydemo

彈出配置

如果需要自定義react的配置，需要運行下面的命令把配置文件彈出來。

npm run eject

安裝redux

npm i redux --save

簡單理解

redux簡單用法就是通過它的store來訂閱和發布信息。
通過subscribe來訂閱action，通過dispatch來觸發action。reducer中定義來各個action要做的事情。

demo代碼 reducer定義

const Add = "addGirl", Remove = "removeGirl";

export function reducer(state = 0, action) {
    switch (action.type) {
        case Add:
            return state + 1;
        case Remove:
            return state - 1;
        default:
            return 10;
    }
}

//action creator,把action封裝成一個方法，這樣用的時候不用每次定義，避免出錯
export function addCreator() {
    return { type: Add };
}
export function removeCreator() {
    return { type: Remove };
}

export function addAsync() {
    return (dispatch, getState) => {
        setTimeout(function () {
            dispatch(addCreator());
        }, 1000);
    }
}

入口文件index.js

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import registerServiceWorker from "./registerServiceWorker";
import { createStore } from "redux";
import thunk from "redux-thunk";
import { reducer,addCreator,removeCreaator } from "./index.redux";
import { Provider } from "react-redux"

const store = createStore(reducer);

function render() {
    ReactDOM.render(
        ,
        document.getElementById("root")
    );
}
//封裝成方法，方便下面的store的訂閱調用
render();
//每當dispatch時，訂閱的函數就會執行
store.subscribe(render);

registerServiceWorker();

App.js

import React, { Component } from "react";
import "./App.css";

class App extends Component {
  render() {
    var store=this.props.store;
    var num=store.getState();
    return (
      
        現在有機關槍{this.props.num}把。
        
        
      
    );
  }
}

export default App;

通過store的dispatch來觸發action，index.js中訂閱的事件就會執行。

redux的異步執行

redux中如果需要執行異步操作，需要安裝react-thunk插件

npm i react-thunk --save

同時需要redux插件的applyMiddleware

關鍵代碼

設置其實很簡單，創建store時，把thunk傳遞給它就行了。

import thunk from "redux-thunk";

const store = createStore(reducer, applyMiddleware(thunk));

在app.js中增加一個觸發異步操作的按鈕，reducer中已經定義了一個異步的方法。

export function addAsync() {
    return (dispatch, getState) => {
        setTimeout(function () {
            dispatch(addCreator());
        }, 1000);
    }
}

異步調用方法會返回一個有兩個參數的方法，兩個參數都是函數，第一個是dispatch函數，第二個是getState函數。
dispatch觸發action，getState獲取state的值。

在app.js中增加代碼

GPU云服務器云服務器 Redux redux源碼 redux-saga react-redux

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

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

編程范式 —— 函數式編程入門

摘要：在函數式編程中數據在由純函數組成的管道中傳遞。函數式編程中函子是實現了函數的容器下文中將函子視為范疇，模型可表示如下但是在函數式編程中要避免使用這種面向對象的編程方式取而代之對外暴露了一個的接口也稱為。 showImg(https://segmentfault.com/img/remote/1460000018101204); 該系列會有 3 篇文章，分別介紹什么是函數式編程、剖析函數...

flyer_dev 2019-08-23 15:07 評論0 收藏0
react-redux插件入門

摘要：描述這個插件可以讓我們的代碼更加的簡潔和美觀。安裝使用提供了兩個重要的接口使用了這個插件，的和就可以忘記來，它們就用不著了。現在有美女個。可先查看我的redux簡單入門 react-redux簡介 react-redux是使用redux開發react時使用的一個插件，另外插一句，redux不是react的產品，vue和angular中也可以使用redux；下面簡單講解，如何使用rea...

Baaaan 2019-08-22 16:28 評論0 收藏0
Redux入門0x106: `react`、`vue`、`原生 js`集成`redux`

摘要：概述之前寫的所有關于的文章都是純粹的，是和框架無關環境無關的，所以我沒有將和一起講，為的是吧和分開，作為獨立的個體來分析，提現的是一種思想，而不是一個思維定式。而現在我們可以嘗試在中來使用了。 0x000 概述之前寫的所有關于redux的文章都是純粹的redux，是和框架無關、環境無關的redux，所以我沒有將redux和react一起講，為的是吧redux和react分開，作為獨立...

BetaRabbit 2019-08-23 12:04 評論0 收藏0
Reactjs、redux的從入門到放棄、刪庫跑路示例

摘要：我的入門到放棄之路最近看到很多相關的問題跟討論，越來越多的小伙伴喜歡這個框架了，同時也在看到了有些入門的小伙伴遇到了各種各樣的問題，本人也是框架使用都一枚，公司是騰訊阿里平安三巨頭合資的一家公司，分別上海深圳杭州北京廣州等多個分部，前端人員 showImg(https://segmentfault.com/img/bVbhonB?w=1278&h=722); 我的react入門到放棄之...

Miracle 2019-08-20 17:43 評論0 收藏0