• 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>
            <h2>Counter</h2>
            <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);
    相关文章
    相关标签/搜索
    管家婆精选六肖期期准