zoukankan      html  css  js  c++  java
  • 如何使用react-redux

    之前学习了react,也学习了redux,那么react-redux是什么呢?实际上他是一个第三方的模块,他可以帮助我们在react之中更加方便的使用redux。首先如果想用react-redux,先要安装react-redux.
    import React from 'react';
    import ReactDOM from 'react-dom';
    import TodoList from './TodoList';
    import { Provider } from 'react-redux';
    
    const App = (
      <Provider>
        <TodoList />
      </Provider>
    )
    
    ReactDOM.render(App, document.getElementById('root'));
    我们使用react-redux的核心api就是Provider。他的作用是什么呢?
    import React from 'react';
    import ReactDOM from 'react-dom';
    import TodoList from './TodoList';
    import { Provider } from 'react-redux';
    import store from './store';
    
    const App = (
      <Provider store={store}>
        <TodoList />
      </Provider>
    )
    
    ReactDOM.render(App, document.getElementById('root'));
    加入了store,是可以正确执行的。首先Provider这个容器连接了store,那么Provider里面所有的组件都有能力去获取store。Provider已经把store提供给了内部所有的组件了。那么todoList里面去获取store里面的数据就不用这么困难了。



    react-redux第二个核心api就是connect。
    import React, { Component } from 'react';
    import { connect } from 'react-redux';
    
    class TodoList extends Component{
      render() {
        return (
          <div>
            <div>
              <input value={this.props.inputValue} onChange = { this.props.changeInputValue}/>
              <button>提交</button>
            </div>
            <ul>
              <li>1</li>
            </ul>
          </div>
        )
      }
    }
    /**
    * 这个意思是让TodoList这个组件和store进行连接。所以connect方法是做连接。
    * 要连接就有连接的方式,所以第一个参数mapStateToProps
    * 他的意思是TodoList与store做连接就有一个规则,规则在哪里,规则在mapStateToProps里面
    */
    //mapStateToProps,把store里面的数据映射给这个组件,并变成组件的props. 而参数state就是指store里面的数据。
    const mapStateToProps = (state) => {
      return {
        inputValue: state.inputValue
      }
    }
    
    /***
    * 我让Todolist这个组件跟store做关联,store里面的数据会映射到props上面
    * 同时如果我想对store的数据做修改,也可以通过store的props来做修改
    * mapDispatchToProps,dispatch,派发,把store的dispatch方法挂载到props上
    *
    */
    const mapDispatchToProps = (dispatch) => {
      return {
        changeInputValue(e){
          const action = {
            type: 'change_input_value',
            value: e.target.value
          }
          dispatch(action);
        }
      }
    }
    export default connect(mapStateToProps, mapDispatchToProps)(TodoList);
  • 相关阅读:
    PAT (Advanced Level) Practice 1055 The World's Richest (25 分) (结构体排序)
    PAT (Advanced Level) Practice 1036 Boys vs Girls (25 分)
    PAT (Advanced Level) Practice 1028 List Sorting (25 分) (自定义排序)
    PAT (Advanced Level) Practice 1035 Password (20 分)
    PAT (Advanced Level) Practice 1019 General Palindromic Number (20 分) (进制转换,回文数)
    PAT (Advanced Level) Practice 1120 Friend Numbers (20 分) (set)
    从零开始吧
    Python GUI编程(TKinter)(简易计算器)
    PAT 基础编程题目集 6-7 统计某类完全平方数 (20 分)
    PAT (Advanced Level) Practice 1152 Google Recruitment (20 分)
  • 原文地址:https://www.cnblogs.com/wzndkj/p/10575961.html
Copyright © 2011-2022 走看看