初學(xué)redux

gaosboy 發(fā)布于2019-08-20 16:32 / 1064人閱讀

摘要：加法操作減法操作當(dāng)前應(yīng)用的所有狀態(tài)都保存在的樹中，這是一個(gè)集合想要修改中的數(shù)據(jù)，必須要發(fā)送，可以在任何時(shí)候調(diào)用發(fā)送會(huì)作為第二個(gè)參數(shù)觸發(fā)創(chuàng)建時(shí)傳入的函數(shù)第一個(gè)參數(shù)是當(dāng)前的樹函數(shù)會(huì)根據(jù)中的信息，返回一個(gè)新的樹存入這使得程序的運(yùn)行在界面出現(xiàn)之前

import { createStore } from "redux"

const initState = {
    count:0
}

const ADD_TODO = {
    type:"ADD",
    payload:"加法操作"
}

const LESS_TODO = {
    type:"LESS",
    payload:"減法操作"
}

const counter = (state = initState,action) => {
    switch(action.type){
        case "ADD":
            return {
                count:state.count+1
            }
        case "LESS":
            return {
                count:state.count-1
            }
        default:
            return state;
    }
}

let  store = createStore(counter);

let unlistener = store.subscribe(()=>{
    console.log(store.getState())
})

store.dispatch(ADD_TODO);
store.dispatch(ADD_TODO);
store.dispatch(ADD_TODO);
store.dispatch(LESS_TODO);

unlistener()

當(dāng)前應(yīng)用的所有狀態(tài)都保存在store的state樹中，這是一個(gè)集合
想要修改state中的數(shù)據(jù)，必須要發(fā)送action，可以在任何時(shí)候調(diào)用dispatch發(fā)送action
action會(huì)作為第二個(gè)參數(shù)觸發(fā)創(chuàng)建store時(shí)傳入的Reducer函數(shù),第一個(gè)參數(shù)是當(dāng)前的state樹
Reducer函數(shù)會(huì)根據(jù)action中的信息，返回一個(gè)新的state樹存入store
這使得程序的運(yùn)行在界面出現(xiàn)之前就變得可以預(yù)測(cè)：
UI組件使用初始的state樹，當(dāng)界面需要改變時(shí)，觸發(fā)action，改變store中state樹的數(shù)據(jù),然后重新渲染顯示

GPU云服務(wù)器云服務(wù)器 Redux redux源碼 redux-saga react-redux

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/82980.html

相關(guān)文章

適合初學(xué)者觀看的深入淺出react全家桶（一）

摘要：本系列文章主要是介紹一些概念原理深入，適合有點(diǎn)基礎(chǔ)的初學(xué)者觀看。是狀態(tài)容器，提供可預(yù)測(cè)化的狀態(tài)管理。使用單向數(shù)據(jù)流，這意味著只能父組件傳遞給子組件。工作流工作流如下圖關(guān)于數(shù)據(jù)流的原理還有大佬不懂這個(gè)話，大佬可以點(diǎn)擊傳送門本系列文章主要是介紹redux一些概念原理深入，適合有點(diǎn)react基礎(chǔ)的初學(xué)者觀看。分別講述了Reudx、React Hooks等內(nèi)容。部分內(nèi)容涉及源碼解析。 wh...

DandJ 2019-08-26 13:44 評(píng)論0 收藏0
【譯】Redux 還是 Mobx，讓我來(lái)解決你的困惑！

摘要：我現(xiàn)在寫的這些是為了解決和這兩個(gè)狀態(tài)管理庫(kù)之間的困惑。這甚至是危險(xiǎn)的，因?yàn)檫@部分人將無(wú)法體驗(yàn)和這些庫(kù)所要解決的問(wèn)題。這肯定是要第一時(shí)間解決的問(wèn)題。函數(shù)式編程是不斷上升的范式，但對(duì)于大部分開發(fā)者來(lái)說(shuō)是新奇的。規(guī)模持續(xù)增長(zhǎng)的應(yīng) 原文地址：Redux or MobX: An attempt to dissolve the Confusion 原文作者：rwieruch 我在去年大量的使用...

txgcwm 2019-08-22 11:06 評(píng)論0 收藏0
react-redux-express異步前后端數(shù)據(jù)交互(面向初學(xué)者,高手勿進(jìn))

摘要：花了整整三天的時(shí)間來(lái)解決一個(gè)非常非常小的問(wèn)題想要把一點(diǎn)心得體會(huì)記錄下來(lái)首先是問(wèn)題的提出前端如果是后端是如何進(jìn)行數(shù)據(jù)的交互總體思路以前接觸的時(shí)候前端模板用的是那時(shí)候就有些不理解的地方最為不理解的幾個(gè)問(wèn)題是前端和后端怎么配合特別是前端特別復(fù)雜的花了整整三天的時(shí)間來(lái)解決一個(gè)非常非常小的問(wèn)題.想要把一點(diǎn)心得體會(huì)記錄下來(lái).首先是問(wèn)題的提出:前端如果是react,后端是express,如何進(jìn)行數(shù)...

KaltZK 2019-08-19 18:44 評(píng)論0 收藏0
Redux概念之二: Redux的三大原則

摘要：就是應(yīng)用程序領(lǐng)域的狀態(tài)，它是類型中的模型的設(shè)計(jì)的概念，這設(shè)計(jì)是由架構(gòu)而來(lái)的，在原本的架構(gòu)中是允許多個(gè)的結(jié)構(gòu)，簡(jiǎn)化為只有單一個(gè)。的設(shè)計(jì)中是與中的相比，它們之間有一些類似的設(shè)計(jì)。 Redux里的強(qiáng)硬規(guī)則與設(shè)計(jì)不少，大部份都會(huì)與FP(函數(shù)式程序開發(fā))、改進(jìn)原本的Flux架構(gòu)設(shè)計(jì)有關(guān)。Redux官網(wǎng)文檔上的三大基本原則，主要是因?yàn)橛锌赡芘鲁鯇W(xué)者不理解Redux中的一些限制或設(shè)計(jì)，所以先寫出來(lái)說(shuō)...

dingda 2019-08-20 13:59 評(píng)論0 收藏0
React組件設(shè)計(jì)實(shí)踐總結(jié)05 - 狀態(tài)管理

摘要：要求通過(guò)要求數(shù)據(jù)變更函數(shù)使用裝飾或放在函數(shù)中，目的就是讓狀態(tài)的變更根據(jù)可預(yù)測(cè)性單向數(shù)據(jù)流。同一份數(shù)據(jù)需要響應(yīng)到多個(gè)視圖，且被多個(gè)視圖進(jìn)行變更需要維護(hù)全局狀態(tài)，并在他們變動(dòng)時(shí)響應(yīng)到視圖數(shù)據(jù)流變得復(fù)雜，組件本身已經(jīng)無(wú)法駕馭。今天是 520，這是本系列最后一篇文章，主要涵蓋 React 狀態(tài)管理的相關(guān)方案。前幾篇文章在掘金首發(fā)基本石沉大海, 沒(méi)什么閱讀量. 可能是文章篇幅太長(zhǎng)了？掘金值太低了？ ...

ideaa 2019-05-23 11:48 評(píng)論0 收藏0