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是一个柯里化函数