react-redux

一、什么是react-redux

React-Redux是Redux的官方React绑定。 它允许您的React组件从Redux存储中读取数据，并将操作分派给存储以更新数据。 它由二个重要的部分组成，一个是<Provider />组件，另一个是connect()是react-redux提供的一个柯里化的函数, 用于连接redux

二、学习网址

https://react-redux.js.org/docs/getting-started react-redux官网

三、如何使用

npm install --save react-redux 安装 import { Provider } from 'react-redux' Provider 的引入 import { connect } from 'react-redux' connect的引入

四、关于Provider

Provider是react-redux提供的一个组件，把这个组件包在最外层，这个组件接收一个参数，就是store， store是通过redux提供的createStore方法创建的。任何一个内部组件，需要用到store里的state或者其它就直接通过connect一下即可。

代码语言：javascript复制

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import App from './App';

import store from './store';
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>, 
document.getElementById('root'));

五、关于connect

connect有两个括号， connect有两个括号，第一个括号传mapStateToProps和mapDispatchToProps，用于把这两个方法的返回值注入到当前组件的props, 第二个括号为当前组件。

代码语言：javascript复制

export default connect(mapStateToProps, mapDispatchToProps)(Counter);

connect的第一个括号也可以直接传(mapStateToProps, actionCreators), actionsCreators里的每个creator就会被映射到组件的props上，并且，这些creators就自动具备了dispatch的功能

代码语言：javascript复制

export default connect(mapStateToProps, { add, reduce, addAsync })(Counter);

mapStateToProps： 意思是把store里的state迁移到当前组件的props上，返回一个对象

代码语言：javascript复制

// mapStateToProps，意思是把store里的state迁移到当前组件的props上，返回一个对象
const mapStateToProps = (state) => {
  const {
    count,
    isLoading
  } = state.cart;
  return {
    count,
    isLoading
  }
}

mapStateToProps： 意思是把actionCreator里创建的action dispatch，并且做为一个方法映射到当前组件的props上，返回一个对象. 可以不这样用

代码语言：javascript复制

const mapDispatchToProps = (dispatch) => {
  return {
    reduceCount: () => {
      dispatch(reduce())
    },
    addCount: () => {
      dispatch(add())
    }
  }
}

redux react 编程算法

0 人点赞