初學redux

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()

當前應用的全部狀態都保存在store的state樹中,這是一個集合
想要修改state中的數據,必需要發送action,能夠在任什麼時候候調用dispatch發送action
action會做爲第二個參數觸發建立store時傳入的Reducer函數,第一個參數是當前的state樹
Reducer函數會根據action中的信息,返回一個新的state樹存入store
這使得程序的運行在界面出現以前就變得能夠預測:
UI組件使用初始的state樹,當界面須要改變時,觸發action,改變store中state樹的數據,而後從新渲染顯示redux

相關文章
相關標籤/搜索