react-redux异步数据操作

import React, { Component } from 'react';
import './App.css';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import action from './react-redux/todos/action'
// ui 组件 只取数据
class App extends Component {
  constructor(props){
    super(props);
    this.add = this.add.bind(this)     
  };
  add(){
    this.props.ADD(this.node.value);
    this.node.value = '';
  };
  render() {
    console.log(this.props)
    return (
      <div className="App">
        <input type="text" ref={node=>this.node=node}/>
        <button onClick={this.add}>add</button>
        {this.props.todos.list.map((item,index)=>{
          return (
              <div key={index}> 
                {item}
              </div>
          )
        })}
      </div>
    );
  }
}
let mapStateToProps = (state)=>state;
// 将dispatch传进去省区了actions 里的方法去 触发action的内置对象
let mapDispatchToProps = (dispatch)=>bindActionCreators(action,dispatch)
//高阶组件 必须传组件进去 export
default connect(mapStateToProps,mapDispatchToProps)(App);

猜你喜欢

转载自www.cnblogs.com/l8l8/p/9482754.html