react-redux的原理及简单实现

前面一篇文章已经讨论了redux的实现原理，如果没看过的小伙伴可以点击链接查看redux的原理及简单实现

下面让我们先看下在react中使用redux的例子：

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore, applyMiddleware } from 'redux';
import { Provider, connect } from 'react-redux';
import thunk from 'redux-thunk';
import reducers from './reducer';
import { handleClick } from './action';


class App extends React.Component {
    render() {
        return <button onClick={this.props.handleClick}>{this.props.name}</button>
    }
}

const mapStateToProps = state => state;
const mapDispatchToProps = { handleClick };

App = connect(mapStateToProps, mapDispatchToProps)(App);


const store = createStore(reducers, applyMiddleware(thunk));

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById('root')
);

从例子中可以看到，从react-redux中引入的函数只有Provider和connect，下面让我们分别来实现它。

Provider的实现

react-redux实现store对象的传递的机制是借助了react中的Context，所以Provider其实就是声明了一个存有store对象的Context，让子组