React-redux学习

最新推荐文章于 2024-03-10 12:20:59 发布

hy313161875

最新推荐文章于 2024-03-10 12:20:59 发布

阅读量209

点赞数

分类专栏： react

本文链接：https://blog.csdn.net/hy313161875/article/details/103863317

版权

react 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文介绍了React-Redux中的关键API——Provider和connect。Provider组件用于向子组件提供Redux store，使它们能够访问全局状态。而connect函数则用于连接Redux的state和actions到React组件，通过mapStateToProps和mapDispatchToProps映射相关状态和方法到组件的props，方便组件直接使用。

摘要由CSDN通过智能技术生成

React-redux

react-redux提供了了两个api

1. Provider 为后代组件提供store.

例子：将redux store中的值传入react组件

import {Provider} from "react-redux"; 
 <Provider store={store}>
    <App />
 </Provider>

2. connect 为组件提供数据和变更方法.
将映射后的状态和方法注入到组件的props上，组件中就可以通过this.props.xx拿到想要的状态和方法了。
connect(mapStateToProps,mapDispatcjToProps)(注入的组件)
mapStateToProps: redux状态和组件状态的映射
mapDispatchToProps：redux方法和组件方法的映射

import React, { Component } from "react";
import { connect } from "react-redux";

class ReactReduxPage extends Component {
    render() {
      const { num, add } = this.props;
      return (
        <div>
          <h3>ReactReduxPage</h3>
          <p>{num}</p>
          {/*<button onClick={() => this.props.dispatch({ type: "ADD" })}>add</button>*/} 
           <button onClick={add}>add</button>
        </div>
      );
    }
  }

  const mapStateToProps = state => {
     return {
        num: state,
       };
    };
   const mapDispatchToProps = {
        add: () => {
        return { type: "add" };
        }
    };

  export default connect(
      //mapStateToProps 把state映射到props
      state => ({ num: state }),
    
      //mapDispatchToProps 把dispatch映射到props
      {
        add: () => ({ type: "ADD" })
      }
    )(ReactReduxPage);