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

巴特西

react-redux的理解

理解

底层原理

使用

react-redux简单代码实现

最新文章

热门文章