Redux-React 代碼原理分析

目標

react使用redux的主要目的是：
1）實現簡潔統一的狀態維護，提高代碼可維護性；
2）實現簡潔的注入依賴，避免重重傳遞參數；
Plug Any Data Into Any Component. This is the problem that Redux solves. It gives components direct access to the data they need.
3）實現自動化渲染。

index.js

應用的入口代碼

import React from 'react';
import { render } from 'react-dom';
import Counter from './Counter';
import { Provider } from 'react-redux';
import { createStore } from 'redux';

const initialState = {
  count: 0
};

function reducer(state = initialState, action) {
  switch(action.type) {
    case 'INCREMENT':
      return {
        count: state.count + 1
      };
    case 'DECREMENT':
      return {
        count: state.count - 1
      };
    default:
      return state;
  }
}

/**
* 1） 創建全局存儲對象 store,傳入合適的reducer.
*/
const store = createStore(reducer);

/**
* 2） 將store實例綁定到 App
*/

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

render(<App />, document.getElementById('root'));

組件代碼

import React from 'react';
import { connect } from 'react-redux';

/**
* index.js創建的store全局對象，會注入到所有下級對象中，因此這里才可以使用dispatch函數來改變屬性。
*/
class Counter extends React.Component {
  increment = () => {
    //實際上是調用全局store對象的dispatch函數
    this.props.dispatch({ type: 'INCREMENT' });
  }

  decrement = () => {
    this.props.dispatch({ type: 'DECREMENT' });
  }

  render() {
    return (
      <div>
        <h3>Counter</h3>
        <div>
          <button onClick={this.decrement}>-</button>
          <span>{this.props.count}</span>
          <button onClick={this.increment}>+</button>
        </div>
      </div>
    )
  }
}

//具體的屬性轉換函數
function mapStateToProps(state) {
  return {
    count: state.count
  };
}

//通過connect方法將store的state屬性轉換成本組件的屬性
export default connect(mapStateToProps)(Counter);