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);