redux工作原理簡單入門

IamDLY 發(fā)布于2019-08-23 11:58 / 3091人閱讀

摘要：首先要明白工作的過程組件通過去觸發(fā)里面的，然后返回一個新的去改變里面的值。一個應(yīng)用只有一個，接收作為參數(shù)。創(chuàng)建，把和聯(lián)系起來組件通過組件可以訪問到里面特定的和避免因為監(jiān)聽所有變化造成性能問題。

首先要明白工作的過程：組件通過dispatch action去觸發(fā)store里面的reducer，然后reducer返回一個新的state去改變store里面的值。我們dispatch的action里面必須寫明白type是啥，這樣reducer里面進行switch action.type的時候才能匹配到需要return的state是什么樣的，因為可能沒有匹配的type，所以reducer必須寫一個默認的return state。
然后開始通過例子說明：
從actions開始吧。 actions其實就是一個對象，這個對象留著給組件dispatch給reducer。我們經(jīng)常看到的是返回action對象的函數(shù)。像這樣子

function addOne() {//+1
    return {
        type: "ADD_ONE"
    }
}

function reduceOne() {//-1
    return {
        type: "REDUCE_ONE"
    }
}

function addCustomNumber(number) {//接收一個參數(shù)，等著給reducer取出來去改變state的值
    return {
        type: "ADD_CUSTOM_NUM",
        number
    }
}

接下來是reducer，也就是和我們的state產(chǎn)生聯(lián)系的純函數(shù)。它接收兩個參數(shù)，第一個是state，可以賦值一個state的初始狀態(tài)，第二個參數(shù)是action，也就是我們的組件通過dispatch一個action的時候，store會把這個action作為參數(shù)傳給reducer。

const initialState = {count: 0};
const counter = (state = initialState, action) => {
    switch (action.type) {
        case "ADD_ONE":
            return { count: state.count + 1};
        case "REDUCE_ONE":
            return { count: state.count - 1};
        case "ADD_CUSTOM_NUM":
            debugger
            return { count: state.count + action.number}
        default:
            return state;
    }
}

store: 一個應(yīng)用只有一個store，createStore接收reducer作為參數(shù)。如果有多個reducer可以用combineReducer把多個reducer結(jié)合在一起傳給createStore。

const store = createStore(counter);//創(chuàng)建store，把reducer和state聯(lián)系起來

組件：通過connect(mapStateToProps, mapDispatchToProps)(組件) 可以訪問到store里面特定的state和action,避免因為監(jiān)聽所有state變化造成性能問題。在mapDispatchToProps里面可以用bindActionCreators把dispatch和action creator綁定在一起，這樣就直接調(diào)用action creator函數(shù)就相當于直接dispatch了。最后，要把連接后的組件寫在provider里面，才能正常訪問到store。于是乎，又回到那個觀點，組件觸發(fā)dispatch action, store里面的reducer會判斷action的類型，然后返回新的state，state的變化也會觸發(fā)組件的更新。

export class Counter extends React.Component {
    render() {
        const { count, addOne, reduceOne, addCustomNumber } = this.props;
        return 
                    
                    {count}
                    
                    
                
    }
}

function mapStateToProps(state) {
    return {count: state.count}
}

function mapDispatchToProps(dispatch) {
    //這樣寫就不用在組件里面還要去dispatch啦，直接把dispatch和actions createor綁定在一起，
    // 調(diào)用actions creator函數(shù)就是調(diào)用dispatch actions
    return bindActionCreators({addOne, reduceOne, addCustomNumber}, dispatch);
}

const WrappedCounter = connect(mapStateToProps, mapDispatchToProps)(Counter);//組件和store, actions連接起來，從而能在組件里面訪問store和actions