快捷導(dǎo)航

react.js框架Redux基礎(chǔ)案例詳解

更新時(shí)間：2021年09月08日 16:03:52 作者：學(xué)習(xí)筆記666

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

react.js框架Redux

安裝：

npm install redux react-redux
#基于react，我們?cè)谇懊嬉呀?jīng)安裝過了

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

Redux核心概念：Store

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

這里寫圖片描述

Reduce

官方告訴我們r(jià)edux的基本使用如下：

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

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

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

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

實(shí)戰(zhàn)演練

1、我們先來定義一個(gè)Reduce

InfoReduce.js：

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

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


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

2、Reduce準(zhǔn)備完成，我們開始使用 Redux

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

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

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

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


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

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

這里寫圖片描述

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

了解action

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

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

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

export  default (state, action)=>{}

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

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

給按鈕綁定一個(gè)點(diǎn)擊事件的函數(shù)addClick

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

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

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

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

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

//測(cè)試數(shù)據(jù)
let info = {
    title:"測(cè)試標(biāo)題",
    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; //返回的就是測(cè)試數(shù)據(jù)
}

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

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

這里寫圖片描述