建站学 - 轻松建站从此开始!

建站学-个人建站指南,网页制作,网站设计,网站制作教程

react redux是什么?

时间:2019-08-12 16:12来源:PHP中文网 作者:猪哥 点击:
React-Redux是Redux的官方React绑定库。它能够使你的React组件从Redux store中读取数据,并且向store分发actions以更新数据。 安装 在你的React app中使用React-Redux: npm install --save react-redux 或者 yarn add react-redux 简言之,react-redux是一个
React-Redux是Redux的官方React绑定库。它能够使你的React组件从Redux store中读取数据,并且向store分发actions以更新数据。

 

安装

在你的React app中使用React-Redux:

npm install --save react-redux

或者

yarn add react-redux

简言之,react-redux是一个轻量级的封装库,核心方法只有两个:Provider和connect。

React-Redux 提供<Provider/>组件,能够使你的整个app访问到Redux store中的数据:

import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import store from "./store";
import App from "./App";
const rootElement = document.getElementById("root");
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  rootElement
);

React-Redux提供一个connect方法能够让你把组件和store连接起来。

通常你可以以下面这种方式调用connect方法:

import { connect } from "react-redux";
import { increment, decrement, reset } from "./actionCreators";
// const Counter = ...
const mapStateToProps = (state /*, ownProps*/) => {
  return {
    counter: state.counter
  };
};
const mapDispatchToProps = { increment, decrement, reset };
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Counter);

 

(责任编辑:yang)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片