react-redux的原理

react-redux的設(shè)計(jì)理念，是增加一個(gè)容器組件，把組件和store之間的通信分成兩部分：第一部分是用容器組件來(lái)獲取store中的數(shù)據(jù)和方法，另一部分是容器組件通過props把這些數(shù)據(jù)和方法傳遞給子組件：

image.png

第一步：創(chuàng)建容器組件

import { connect } from 'react-redux'
import CountUI from "../../components/Count";
import {increment, decrement, incrementAsync} from "../../redux/actions/count";

export default connect(
  state => ({
    count: state.count,
    personCount: state.person.length
  }),
  dispatch => ({
    increment: data => dispatch(increment(data)),
    decrement: data => dispatch(decrement(data)),
    incrementAsync: data => dispatch(incrementAsync(data)),
  })
)(CountUI);

1. 下載依賴yarn add react-redux;
2. 在容器組件中引入connect,創(chuàng)建父組件并暴露；在App.js中引入父組件；
3. connect是個(gè)高階函數(shù)，第一次調(diào)用的參數(shù)是兩個(gè)函數(shù)，第二次調(diào)用的參數(shù)是子組件:
   （1）第一次調(diào)用的第一個(gè)函數(shù)參數(shù)，帶默認(rèn)參數(shù)state，返回值為子組件中要使用的狀態(tài)數(shù)據(jù)，key和value分別作為props中的key-value傳遞。
   （2）第一次調(diào)用的第二個(gè)函數(shù)參數(shù)，帶默認(rèn)參數(shù)dispatch，返回值為修改數(shù)據(jù)的方法?？梢允÷灾貜?fù)的結(jié)構(gòu)簡(jiǎn)寫為對(duì)象形式：

import { connect } from 'react-redux'
import CountUI from "../../components/Count";
import {increment, decrement, incrementAsync} from "../../redux/actions/count";

export default connect(
  state => ({
    count: state.count,
    personCount: state.person.length
  }),
  // dispatch => ({
  //   increment: data => dispatch(increment(data)),
  //   decrement: data => dispatch(decrement(data)),
  //   incrementAsync: data => dispatch(incrementAsync(data)),
  // })
  { increment, decrement, incrementAsync}
)(CountUI);

4. 容器組件可以和子組件合二為一：

import React, {Component} from "react";
import {connect} from "react-redux";
import {
  increment,
  incrementAsync,
  decrement
} from "../../redux/actions/count";


class Count extends Component{
  increment = () => {
    const {value} = this.selectDom;
    this.props.increment(value * 1);
  }
  ...

  render() {
    return (
      <div>
        <h2>當(dāng)前求和為{this.props.count}</h2>
        <h2>下面人數(shù)為{this.props.personCount}</h2>
        <select ref={c=>this.selectDom = c}>
          {[1,2,3].map((number, i) => <option value={number} key={i}>{number}</option>)}
        </select>
        <button onClick={this.increment}>+</button>
        <button onClick={this.decrement}>-</button>
        <button onClick={this.incrementIfOdd}>求和為奇數(shù)則加</button>
        <button onClick={this.incrementAsync}>異步求和</button>
      </div>
    )
  }
}


export default connect(
  state => ({
    count: state.count,
    personCount: state.person.length
  }),
  { increment, decrement, incrementAsync}
)(Count);

第二步：給父容器傳入store

react-redux中，父容器給子組件傳入store中的數(shù)據(jù)，需要確保給父容器傳入了store：

import React, {Component} from 'react';
import Count from "./container/Count";
import Person from "./container/Person";
import store from "./redux/store";

export default class App extends Component{
  render() {
    return (
      <div>
        {/**
         react-redux 需要給容器組件傳入store
         */}
        <Count store = {store}/>
        <hr/>
        <Person store = {store}/>
      </div>
    );
  }
}

但是這樣給 App中的所有父容器一一傳入store比較麻煩，可以借助react-redux提供的 Provider組件，給App中所有的容器組件傳入store：
src/index.js

import React from "react";
import ReactDom from 'react-dom';
import App from './App';
import store from "./redux/store";
import { Provider } from 'react-redux';

/**
 * 從react-redux中引入Provider，在入口文件中包裹App，傳入store，則App下的所有容器都會(huì)包含store這個(gè)props
 * */
ReactDom.render(
  <Provider store={store}>
    <App/>
  </Provider>,
  document.getElementById('root'));

• 使用react-redux可以不用手動(dòng)監(jiān)聽store改變觸發(fā)渲染了。