依照慣例引瀑，開頭先放出redux中文文檔地址

前文講了redux的基礎(chǔ)概念烈涮，這次學(xué)習(xí)一下redux和react的結(jié)合使用

React-Redux

說到redux在react中的使用逼肯，肯定繞不開react-redux這個(gè)庫征懈。首先聲明鸣剪，在react中使用redux并非一定要用react-redux沟突，同樣的redux也不是只能為react服務(wù)花颗，它同樣也支持vue、Angular惠拭、純JS等等扩劝。這里使用react-redux更多的是考慮這已經(jīng)算react生態(tài)圈的最佳實(shí)踐了。

connect()

react-redux提供了connect()方法职辅。
連接 React 組件與 Redux store棒呛。
連接操作不會(huì)改變原來的組件，返回一個(gè)新的已與Redux store連接的組件域携。
調(diào)用方法： connect([mapStateToProps], [mapDispatchToProps], [mergeProps],[options])
講解一下參數(shù)条霜，基本都是顧名思義：
[mapStateToProps(state, {ownProps})](Function): 一個(gè)函數(shù)，返回一個(gè)對象涵亏，把store中的state傳到UI組件上，也可以把容器組件自己的props傳遞過去
[mapDispatchToProps(dispatch, {ownProps}): dispatchProps)](Object or Function): 一個(gè)函數(shù)或?qū)ο笃研祝xUI組件上的props和需要觸發(fā)的Action之間的映射關(guān)系

<Provider>標(biāo)簽

定義完connect()方法气筋，想要生成容器組件還需把state傳遞給容器組件(回顧一下上面的邏輯，UI組件是我們自定義的旋圆，通過react-redux提供的connect()方法宠默，我們已經(jīng)把store中的state傳給了UI組件的props，UI組件中需要觸發(fā)store中state變化的Action函數(shù)也已經(jīng)傳入灵巧，但是我們只建立了這種連接關(guān)系搀矫，容器組件的state還沒有定義)抹沪。<Provider>標(biāo)簽作用就是通過react組件的context把store中的state直接傳入。
例子：

ReactDOM.render(
    <Provider store={store}>
        <MyRootComponent />
    </Provider>,
rootElement
)

至此瓤球，如果不考慮異步場景融欧，我們應(yīng)該已經(jīng)可以在react項(xiàng)目中使用redux了
下面在create-react-app腳手架上開始寫一個(gè)簡單的小例子：

• 初始化一個(gè)react項(xiàng)目，原始項(xiàng)目應(yīng)該包含一個(gè)app首頁
  
  react-app
• 在此項(xiàng)目基礎(chǔ)上安裝redux/react-redux/react-router等包
• 創(chuàng)建state相關(guān)目錄（此處sagas非必要卦羡，僅在后文處理異步場景示例中使用到）
  
  image.png
• 在actions中創(chuàng)建action
  例如：

  function mark({ payload: id }) {
      return {
          type: 'MARK ITEM',
          payload: id
      };
  }
  

  在reducers中創(chuàng)建reduce
  例如：

  const initialUi = {
      backgroundColor: false
  };
  
  
  function markItem (state = initialUi, action) {
        let backgroundColor = state.backgroundColor;
  
        if (action.type === 'MARK ITEM') {
            backgroundColor = !backgroundColor;
            return backgroundColor;
        }
  
        return backgroundColor;
    }
  
    function ui (state = initialUi, action) {
        return {
            backgroundColor: markItem(state, action)
        }
    }
  
  export default ui;
  

  合并reducer

  import { combineReducers } from 'redux';  
  
  const reducer = combineReducers({
      ui
  }); 
  
  export default reducer;
  

  在store中創(chuàng)建store

  import { createStore, applyMiddleware } from 'redux';
  
  const store = createStore(
      reducer
  ); 
  
  export default store;
  

  在container組件中把組件屬性和store相連

  import React, { Component } from 'react';
  import { connect } from 'react-redux';
  import { mark } from '../state/actions/ui';
  
  class example extends Component {
      constructor() {
          super();
      }
  
      render () {
          console.log(this.props)
          return (
              <div>
                  { this.props.ui.backgroundColor }
                  <ul>
                    <li key={0} onClick={() => this.props.markItem(0)}>0</li>
                    <li key={1} onClick={() => this.props.markItem(1)}>1</li>
                    <li key={2} onClick={() => this.props.markItem(2)}>2</li>
                </ul>
            </div>
          );
      }
  }
  
  const mapStateToProps = (state) => {
      return {
          ui: state.ui
      }
  };
  
  const mapDispatchToProps = (dispatch) => {
      return {
          markItem: id => {
              dispatch(mark({ payload: id }));
          }
      };
  };
  
  
  const Example = connect(
      mapStateToProps,
      mapDispatchToProps
  )(example);
  

  在App中添加組件噪馏，同時(shí)引入react-router

  class App extends Component {
      render() {
          return (
            <div>
              <header className="App-header">
                <img src={logo} className="App-logo" alt="logo" />
                <h1 className="App-title">Welcome to React</h1>
              </header>
              <Router>
                  ...
                  <Route path="/example" component={Example}/>
                </div>
              </Router>
            </div>
          );
      }
  }
  

  在index.js中通過<Provider>組件傳入store

  ...
  import { Provider } from 'react-redux';
  import store from './state/store/store';
  import App from './App';
  ... 
  
  ReactDOM.render(
    <Provider store={ store }>
        <App />
    </Provider>,
    document.getElementById('root')
  );
  

  初始狀態(tài).png
  
  
  點(diǎn)一下狀態(tài)發(fā)生改變.png
  
  （這里介紹一個(gè)調(diào)試redux的小工具Redux DevTools，是一個(gè)中間件绿饵，使用方式可以自己看鏈接）

這就完成了把目前所有redux和react相關(guān)內(nèi)容串聯(lián)起來的小例子

（未完待續(xù)欠肾。。拟赊。）