美文网首页
#React-Redux

#React-Redux

作者: 最念倾城 | 来源:发表于2020-03-17 23:17 被阅读0次

React-Redux是Redux的官方React绑定库。它能够使你的React组件从Redux store中读取数据,并且向store分发actions以更新数据

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

npm install --save react-redux
或者

yarn add 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);

相关文章

网友评论

      本文标题:#React-Redux

      本文链接:https://www.haomeiwen.com/subject/abwxyhtx.html