React-Redux簡單使用

之前寫過一篇Redux入門，有興趣可以看看。

React-Redux

Redux流程中，每個組建中要把狀態對映到組建上，還要自己訂閱和更新，很麻煩。所以React-Redux誕生了，可以實現把redux對映到元件裡，還可以自動更新。

React-Redux是把redux進一步封裝，讓redux操作更簡單。

store資料夾中的內容和redux一樣
只是在元件調取使用的時候，可以優化一些步驟

React-Redux主要有兩個元件：

Provider 根元件
connect 高階元件

Provider 根元件

React-Redux 提供Provider元件，再經過他的手通過context api傳遞給所有的子元件，套在子元件外面（有點像路由的用法），作用就是把建立的store可以供內部任何後代元件使用（基於上下文完成的）。

Provider元件中只允許出現一個子元素。

把建立的store基於屬性傳遞給Provider(這樣後代元件都可以使用這個store)。

import React from 'react';
import {render} from 'react-dom';
import Cart from  './components/cart'
import {Provider} from 'react-redux';
import store from './store';
render(<Provider store={store}>
    <Cart></Cart>
</Provider>,window.root);複製程式碼

connect() 高階元件

React-Redux 提供connect方法，是個高階函式，connect實現的是倉庫和元件的連線。

相對於傳統的元件，做的優化步驟有：

connect方法呼叫後返回的是新元件。所以匯出的不再是我們建立的元件，而是基於connect構造後的高階元件。
export default connect([mapStateToProps],[mapDispatchToProps])([自己建立的元件名字])
react-redux幫我們做了一件非常重要的事情，以前我們需要自己基於subscribe向事件池追加方法，以達到容器狀態資訊改變的時候，執行我們追加的方法。但是現在不用了，react-redux幫我們做了這件事：“所有用到redux容器狀態資訊的元件，都會向事件池追加一個方法，當狀態資訊改變，通知方法執行，把最新的狀態資訊作為屬性傳遞給元件，元件的屬性值改變了，元件也會重新渲染”

原本沒使用react-redux的元件：

import React, { Component } from 'react';
import store from '../store';
import actions from '../store/actions/counter';

export default class Counter extends Component {
    constructor() {
        super();
        this.state = { number: store.getState().c.number }
    }
    componentDidMount() {
        this.unsub = store.subscribe(() => {
            this.setState({ number: store.getState().c.number })
        });
    }
    componentWillUnmount() {
        this.unsub();
    }
    render() {
        return <div>
            計數器 {this.state.number}
            <button onClick={() => {
                store.dispatch(actions.add(2))
            }}>+</button>
            <button onClick={() => {
                store.dispatch(actions.minus(1));
            }}>-</button>
        </div>
    }
}
複製程式碼

使用react-redux：

import React, { Component } from 'react';
import actions from '../store/actions/counter';
import {connect} from 'react-redux';

class Counter extends Component {
    constructor() {
        super();
    }
    render() {
        return <div>
            計數器 {this.props.n}
            <button onClick={() => {
                this.props.add(2)
            }}>+</button>
            <button onClick={() => {
              this.props.minus(1);
            }}>-</button>
        </div>
    }
}

// // 把REDUX容器中的狀態資訊遍歷，賦值給當前元件的屬性（state）
let mapStateToProps = (state)=>{
    // state就是redux容器中的狀態資訊
    // 我們返回的是啥，就把它掛載到當前元件的屬性上（redux儲存很多資訊狀態，我們想用啥就返回啥即可）
    return {n:state.c.number}
}
// 把redux中的dispatch派發行為遍歷，也賦值給元件的屬性（ActionCreator）
let mapDispatchToProps = (dispatch) =>{
    // dispatch:就是store中儲存的dispatch方法
    // 返回的是啥，就相當於把它掛載到當前元件的屬性上（一般我們掛載一些方法，這些方法中完成了dispatch派發任務操作）
    return {
        add(n){dispatch(actions.add(n))},
        minus(n){dispatch(actions.minus(n))}
    }
}
export default connect(mapStateToProps,mapDispatchToProps)(Counter);複製程式碼

其中上面匯出的connect可優化為：

因為react-redux幫我們做了一件事，把action-creator中編寫的方法（返回action物件的方法），自動構建成dispatch派發任務的方法，也就是mapDispatchToProps這種格式

export default connect(state=>({n:state.c.number}),action)(Counter);複製程式碼

React-Redux簡單使用

React-Redux

Provider 根元件

connect() 高階元件

相關文章