react.js框架Redux基礎案例詳解

更新時間：2021年09月08日 16:03:52 作者：學習筆記666

這篇文章主要介紹了react.js框架Redux基礎案例詳解,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細內(nèi)容,需要的朋友可以參考下

react.js框架Redux

安裝：

npm install redux react-redux
#基于react，我們在前面已經(jīng)安裝過了

Redux參考文檔：
http://redux.js.org/

Redux核心概念：Store

我們可以簡單的理解為就是用來存儲各個組件的State或你自己定義的獨立的state，對state進行統(tǒng)一讀取、更新、監(jiān)聽等操作。
http://redux.js.org/docs/basics/Store.html

這里寫圖片描述

Reduce

官方告訴我們redux的基本使用如下：

import {createStore} from "redux";
import todoApp from "./reducers";
let store = createStore(todoApp);

createStore()參數(shù)傳入的是一個函數(shù)Function。
在redux里的概念叫做：Reduce
Reduce的基本形式：

function myFun(state,action){
  // ...
}

當然我們也可以使用esmascript 2015的箭頭函數(shù)形式來定義。

實戰(zhàn)演練

1、我們先來定義一個Reduce

InfoReduce.js：

//測試數(shù)據(jù)
let info = {
    title:"測試標題",
    clicknum:0
};

// 把數(shù)據(jù)通過參數(shù)船體
export  default (state = info, action)=>{


    return state; //返回的就是測試數(shù)據(jù)
}

2、Reduce準備完成，我們開始使用 Redux

import InfoReduce  from "./../redux/InfoReduce";

import {createStore} from "redux";
let store = createStore(InfoReduce);

3、Redux中很重要的概念store已經(jīng)創(chuàng)建，我們看看在組件里如何使用？

// 定義一個名叫InfoDetail的組件
class InfoDetail extends  React.Component{
    // 構(gòu)造
      constructor(props) {
        super(props);
        // 初始狀態(tài)
        this.state = {
            infoData:store.getState() //通過store對象的方法獲取數(shù)據(jù)
        };
      }


        render(){
            return <div>
                <h2>新聞標題：{this.state.infoData.title}</h2>
                <span>點擊量：{this.state.infoData.clicknum}</span>
                <p><button>修改點擊量</button></p>
            </div>
        }
}

通過store.getState()獲取數(shù)據(jù)。

這里寫圖片描述

到這里我們基本明白了：Reducers就是規(guī)定的一種函數(shù)，它產(chǎn)生新的state然后傳遞給Store；我們的組件通過Store來獲取state更新組件數(shù)據(jù)。

了解action

官方文檔對action的說明：
http://redux.js.org/docs/basics/Actions.html

其實通過action這個單詞我們可以猜測到是用來處理業(yè)務的操作。

在我們前面的代碼中，哪里還有action？
我們定義Reducer函數(shù)的時候，第二個參數(shù)就是：

export  default (state, action)=>{}

1、既然action是操作，表示我們組件上事件處理函數(shù)中需要它

<button onClick={this.addClick.bind(this)}>修改點擊量</button>

給按鈕綁定一個點擊事件的函數(shù)addClick

2、下面來看看 addClick 函數(shù)里有什么乾坤?

        addClick(){
            //修改state
            store.dispatch({
                type:"INFO_CLICK"
            })

            this.setState({ //更新state
                infoData:store.getState()
            })
        }

this.setState()我們前面學過這是用來更新狀態(tài)(state)；
store.dispatch()這又是我們Redux里的東東了，這個方法其實就的調(diào)度action的。
通過type來區(qū)分。

3、根據(jù)我們的需求，我們的action要處理的業(yè)務邏輯是對clicknum增加

//測試數(shù)據(jù)
let info = {
    title:"測試標題",
    clicknum:0
};

// 把數(shù)據(jù)通過參數(shù)船體
export  default (state = info, action)=>{

    if (action.type == "INFO_CLICK"){
        let oldNum = state.clicknum;
        oldNum++;

        // 返回新的數(shù)據(jù)
        return Object.assign({},state,{clicknum:oldNum});
    }

    return state; //返回的就是測試數(shù)據(jù)
}

我們的Reducer函數(shù)中，通過action.type來判斷，然后處理業(yè)務邏輯相關(guān)。

到這里，我們可能迷惑了，Redux怎么還麻煩了，是的，一般是在業(yè)務邏輯很復雜的項目才使用的

這里寫圖片描述