在React-Redux中中结尾定下了使用react-redux的官方用法是通过provider将store传给App组件，使其下的所有组件都能使用store里面的数据
ReactDOM.render( //在Provider中使用store属性接收store <Provider store={store}> <React.StrictMode> <App/> </React.StrictMode> </Provider> , document.getElementById('root'));
其本质其实就是使用了一个上下文生产和消费数据，那这么来说的话和我前段时间学过的Context+Provider+Consumer就是一回事
思考：可以不以手写自己封装一个功能类似的组件呢？
小单已经跃跃欲试啦
Step 01.创建文件搭建基本的结构
//context.js //01.创建上下文需要引入react import react from 'react' //0.2创建一个常量保存创建的上下文对象,默认值为空 const storeContext = react.createContext({}) //03.需要在外界使用，所以把它暴露出去 export default storeContext
Step 02.将需要消费storeContext里头保存的数据进行修改
//App.js import React from 'react'; import ReactDom from 'react-redux' import storeContext from '../connect/storeContext'; import App from './App'; ReactDOM.render( //在Provider中使用store属性接收store <storeContext.Provider value={store}> <React.StrictMode> <App/> </React.StrictMode> </storeContext.Provider> , document.getElementById('root'));
Step03. 消费数据
// context.js //导入依赖包 import React from 'react' import ReactDom from 'react-dom' import storeContext from './context'; function connect(mapStateToProps, mapDispatchToProps) { // 0.2 将传入的storecontext设置为AdvComponent的context AdvComponent.context=storeContext; return AdvComponent; return function enhanceComponent(WrappedComponent) { class AdvComponent extends React.PureComponent{ constructor(props,context){ super(props,context); this.state = { storeState : {...mapStateToProps(this.context.getState())} } } componentDidMount() { store.subscribe(()=>{ this.setState({ storeState: {...mapStateToProps(this.context.getState())} }) }) } componentWillUnmount() { store.unsubscribe(); } render() { return (<WrappedComponent {...this.props} {...mapStateToProps(this.context.getState())} {...mapDispatchToProps(this.context.dispatch)}/>) } } } } export default connect;
这样如果是要访问store里面的数据直接通过this.context就可以啦！实现了通过context获取store里头的数据
