react-redux簡介

React 和 Redux 其實是兩個獨立的框架，都可以單獨的使用。但在react中使用redux的話，就沒有理由不使用 react-redux了，因為它可以大大的簡化redux的程式碼書寫。

react-redux核心

react-redux有兩個最主要的核心功能

• connect : 用來連結容器元件和UI元件
• Provider: 提供包含 store的context

connect()

connect方法，用於從UI元件生產容器元件，將兩個元件連線起來。

import React, { Component } from 'react'
import { connect } from 'react-redux'

class Home extends Component {
    render() {
        return (
        	...
        )
    }
}
            
export default connect(null,null)(Home);
 

connect方法有兩個引數：mapStateToProps 和mapDispatchToProps。通過這兩個單詞我們也可以瞭解到前者是將state對映到UI的props,後者是將UI元件中的一些操作傳遞給action

mapStateToProps()

mapStateToProps是一個函式，是connect的第一個引數，它接收一個引數state,返回一個物件，返回的物件實際就是我們需要獲取到的值。

//UI元件程式碼
// 使用時直接{ this.props.input_value }就可以了。
...
const mapStateToProps = (state) => {
    return {
        input_value: state.default_value
    }
}
            
export default connect(mapStateToProps,null)(Home);
 

mapDispatchToProps()

mapDispatchToProps可以是函式也可以是物件，如果是函式就會有dispatch和ownProps兩個引數，並且return一個物件。

//UI元件程式碼
import React, { Component } from 'react'
import { connect } from 'react-redux'

class Home extends Component {
    
    handleClick = () => {
       this.props.change();
    }
    render() {
        return (
        	<div>
            	<button onClick={this.handleClick}>點我</button>
            </div>
        )
    }
}

const mapDispatchToProps = (dispatch,ownProps) => {
  return {
    change: () => {
      dispatch({
        type: "VALUE_CHANGE",
        value: ownProps.input_value
      });
    }
  }
}         
export default connect(mapStateToProps,null)(Home);
 

Provider 元件

connect方法生成容器元件以後，需要讓容器元件拿到state物件，才能生成 UI 元件的引數。

一種解決方法是將state物件作為引數，傳入容器元件。但是，這樣做比較麻煩，尤其是容器元件可能在很深的層級，一級級將state傳下去就很麻煩。

另外一種就是利用 React-Redux提供的Provider元件，在最外層包一層Provider元件，這樣一來，App的所有子元件就預設都可以拿到state了。

import React from 'react';
import ReactDOM from 'react-dom';
import App from './app';
import registerServiceWorker from './registerServiceWorker';
import store from './store'
import { Provider } from 'react-redux';

const Main = (
    <Provider store={store}>
        <App />
    </Provider>
)

ReactDOM.render(Main, document.getElementById('root'));
registerServiceWorker();

React-Redux雖然看著有些麻煩，但方便了我們的操作，只要多寫幾遍這個流程，明白了其中的原理，就能很愉快的使用它了。