react-redux的理解
理解
react-redux是辅助redux的,我们正常使用redux是很麻烦的,需要在每个组件中去监听数据变化,执行数据更新等,但是通过react-redux,我们可以简化组件使用公共数据的操作
react-redux通过Provider+connect方式完成跨组件传值
底层原理
我们知道跨组件传值有一个方法是context,context通过是Provider+Consumer使用
react-redux和context传值类似:提供的Provider生产者,Consumer结合高阶组件+柯里化函数封装成connect
使用
用Provider包裹根组件,store是自定义属性,属性值是要传递的数据,只要子组件中引入connect,就可以调用store中的值
//根目录index.js import React from 'react'; import ReactDOM from 'react-dom'; import {HashRouter as Router} from "react-router-dom" import App from './App'; import {Provider} from 'react-redux'; import store from './store'; import 'lib-flexible'; import './assets/styled/reset.css'; ReactDOM.render( <Provider store={store}> <Router> <App /> </Router> </Provider> , document.getElementById('root') );
子组件中引入connect,获取store中的值
react-redux简单代码实现
import React,{Fragment}from "react" import {Consumer} from "../../createContext" //其实就是react-redux的底层实现,这种函数形式是典型的柯里化函数即返回结果是函数,调用方式:fn()(). export default (Wrapper)=>(mapStateToProps)=>{ return class extends React.Component{ render(){ return ( <Consumer> { (value)=>{ let props = mapStateToProps(value); return <Wrapper {...props}/> } } </Consumer> ) }}}
使用实现的简单代码
import React, { Component } from 'react'; import connet from "../hoc/connect" class one extends Component { render() {...} } //函数形式map,可以作为回调函数,在高阶组件封装中调用 const mapStateToProps = (state)=>({ age:state.age, sex:state.sex }) export default connet(one)(mapStateToProps);//这是柯里化函数的用法,说明connet是一个柯里化函数
开源中国博客地址:https://my.oschina.net/u/2998098/blog/1540520