码迷,mamicode.com
首页 > 其他好文 > 详细

Redux-React 代码原理分析

时间:2019-11-24 22:42:05      阅读:89      评论:0      收藏:0      [点我收藏+]

标签:com   create   cas   维护   store   简洁   对象   export   参数   

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

Redux-React 代码原理分析

标签:com   create   cas   维护   store   简洁   对象   export   参数   

原文地址:https://blog.51cto.com/14623024/2453051

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!