redux+react-redux基本介紹+使用案例(一)

其實，redux和react並沒有半毛錢的關係，redux甚至可以和jq一起用。 react-redux纔是react的用於便捷操作redux的第三方插件。

1.創建項目

create-react-app redux-demo

2.安裝redux

npm install redux --S

3.安裝react-redux

npm install react-redux --S

首先來介紹一下：

action：行爲 它是一個對象 裏面必有type來指定其類型 這個類型可以理解爲你要做什麼，reducer要根據action的type來返回不同的state 每個項目有且可以有多個action。它是 store 數據的唯一來源。一般來說你會通過 store.dispatch() 將 action 傳到 store。記住 actions 只是描述了有事情發生了這一事實，並沒有描述應用如何更新 state。reducers 指定了應用狀態的變化如何響應 actions 併發送到 store 的。

reducer： 可以理解爲一個專門處理state的工廠 給他一箇舊數據它會根據不同action.type返回新的數據，每個項目有且可以有多個reducer。記住 actions 只是描述了有事情發生了這一事實，並沒有描述應用如何更新 state。reducers 指定了應用狀態的變化如何響應 actions 併發送到 store 的。

store： store本質上是一個狀態樹，保存了所有對象的狀態。任何UI組件都能直接的從store訪問特定對象的狀態。每個項目有且只能有一個store。（使用 action 來描述“發生了什麼”，和使用 reducers 來根據 action 更新 state 的用法）

• 提供 getState() 方法獲取 state；
• 提供 dispatch(action) 方法更新 state；
• 通過 subscribe(listener) 註冊監聽器;

案例：

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux';
import { Provider, connect } from 'react-redux';

class App extends Component {
    render() {
        const { PayIncrease, PayDecrease } = this.props;
        return (
            <div className="App">
                <div className="App">
                    <h2>當月工資爲{this.props.tiger}</h2>
                    <button onClick={PayIncrease}>升職加薪</button>
                    <button onClick={PayDecrease}>遲到罰款</button>
                </div>
            </div>
        );
    }
}

const tiger = 10000

//這是action
const increase = {
    type: '漲工資'
}
const decrease = {
    type: '扣工資'
}

//這是reducer
const reducer = (state = tiger, action) => {
    switch (action.type) {
        case '漲工資':
            return state += 100;
        case '扣工資':
            return state -= 100;
        default:
            return state;
    }
}

//把reducer放到createStore裏， 並創建store
const store = createStore(reducer);

//需要渲染什麼數據
function mapStateToProps(state) {
    return {
        tiger: state
    }
}

//需要觸發什麼行爲
function mapDispatchToProps(dispatch) {
    return {
        PayIncrease: () => dispatch({ type: '漲工資' }),
        PayDecrease: () => dispatch({ type: '扣工資' })
    }
}

//連接組件， 通過connect將export default App修改爲 export default connect(mapStateToProps)(App); 即可通過this.props 獲取到store中數據 

App = connect(mapStateToProps, mapDispatchToProps)(App)

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById('root')
)

 

Provider：它是react-redux 提供的一個 React 組件，作用是把state傳給它的所有子組件，也就是說 當你用Provider傳入數據後 ，下面的所有子組件都可以共享數據，十分的方便。
Provider的使用方法是：把Provider組件包裹在最外層的組件，如代碼所示，把整個APP組件給包裹住，然後在Provider裏面把store傳過去。注意：一定是在Provider中傳store，不能在APP組件中傳store。
connect：它是一個高階組件 所謂高階組件就是你給它傳入一個組件，它會給你返回新的加工後的組件，注重用法倒簡單，深究其原理就有點難度。這裏不做connect的深究，主要是學會它的用法，畢竟想要深究必須先會使用它。首先它有四個參數([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])，後面兩個參數可以不寫，不寫的話它是有默認值的。我們主要關注下前兩個參數mapStateToProps和mapDispatchToProps。
connect的使用方法是：把指定的state和指定的action與React組件連接起來，後面括號裏面寫UI組件名。

除此之外demo中還多出了mapStateToProps mapDispatchToProps 他們又有什麼作用呢？通俗一點講的話就是：
比如你在一個很深的UI組件裏 當你想要獲得store的數據就很麻煩。mapStateToProps就是告訴store你需要哪個state，需要什麼數據就直接在mapStateToProps中寫出來，然後store就會返回給你。同理，如果你想要dispatch派發一些行爲怎麼辦呢，mapDispatchToProps就是告訴store你要派發什麼行爲，需要派發什麼行爲就在mapDispatchToProps中寫出來，然後store就會把你想要派發的行爲告訴reducer，接下來大家都應該知道了 reducer就會根據舊的state和action返回新的state。