美文网首页
react-redux在react中的使用

react-redux在react中的使用

作者: zoeykkkk | 来源:发表于2019-03-22 23:52 被阅读0次

    参考阮一峰老师博客:Redux 入门教程

    react-redux是redux作者给react提供的一个封装库,可以方便的将redux中的状态和方法注入到react组件中,redux中store相当于数据库,state相当于数据库的数据,dispatch(action)提供了对数据的修改方法,react-redux完成数据订阅,监测store中状态的变化并渲染更新后的react组件。

    redux基本API

    store:存放状态的容器,通过createStore方法接收一个reducer生成

    import { createStore } from 'redux';
    const store = createStore(reducer);
    

    state:store中的状态
    action:是一个对象,type是必须的,可以带一个参数

    const action = {
      type: 'ADD_TODO',
      payload: 'Learn Redux'
    };
    

    actionCreator:生成action的函数

    function addTodo(text) {
      return {
        type: ADD_TODO,
        text
      }
    }
    

    dispatch:View 发出 Action 的唯一方法。

    store.dispatch({
      type: 'ADD_TODO',
      payload: 'Learn Redux'
    });
    

    reducer:Store接收一个旧的action生成一个新的state的计算过程

    const reducer = function (state, action) {
      return new_state;
    };
    
    react-redux基本API

    Provider:将redux store中的值传入react组件

      <Provider store={store}>
        <App />
      </Provider>
    

    mapDispatchToProps : redux方法和组件方法的映射

    const mapDispatchToProps = dispatch => ({
      switchMenu: menuName => {
        dispatch(switchMenu(menuName));
      }
    })
    

    mapStateToProps:redux状态和组件状态的映射

    const mapStateToProps = state =>({
      menuName: state.menuName
    })
    

    connect:将映射后的状态和方法注入到组件props上,组件中就可以通过this.props.xx拿到想要的状态和方法了

    connect(mapStateToProps, mapDispatchToProps)(Header)
    

    相关文章

      网友评论

          本文标题:react-redux在react中的使用

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