美文网首页
react-redux

react-redux

作者: 422ccfa02512 | 来源:发表于2018-10-14 22:09 被阅读75次

    一、什么是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一下即可。

    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, 第二个括号为当前组件。

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

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

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

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

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

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

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

    相关文章

      网友评论

          本文标题:react-redux

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