SHARE
TWEET

Untitled

a guest Oct 21st, 2019 69 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. // index.js
  2.  
  3. import React from 'react';
  4. import InputTask from './components/InputTask/index'
  5. import TaskList from './components/TaskList/index'
  6.  
  7. import { Provider } from 'react-redux'
  8. import store from './store/index'
  9.  
  10.  
  11.  
  12. function App() {
  13.   return (
  14.     <div className="App">
  15.       <Provider store={store}>
  16.         <h1>TODO APP</h1>
  17.         <InputTask />
  18.         <TaskList />
  19.       </Provider>
  20.     </div>
  21.   );
  22. }
  23.  
  24. export default App;
  25.  
  26.  
  27. // InputTask.js
  28.  
  29. import React, { Component } from 'react';
  30. import { connect } from 'react-redux'
  31. import { addTask } from '../../actions/index'
  32.  
  33. class InputTask extends Component {
  34.   state = {
  35.     task: ""
  36.   }
  37.  
  38.   handlerSubmit(event){
  39.     event.preventDefault();
  40.     this.props.dispatch(addTask(this.state.task));
  41.   }
  42.  
  43.   render(){
  44.     return(
  45.       <form onSubmit={this.handlerSubmit.bind(this)}>
  46.         <input type="text" value={this.state.task} onChange={(event) => this.setState({ task: event.target.value })}/>
  47.         <button>Add</button>
  48.       </form>
  49.     )
  50.   }
  51. }
  52.  
  53. export default connect(state => state)(InputTask)
  54.  
  55. // TaskList.js
  56.  
  57. import React from 'react'
  58. import { connect } from 'react-redux';
  59.  
  60. const TaskList = ({ tasks }) => (
  61.     <ul>
  62.         { tasks.map( (task) => <li key={task.id}>{task.text}</li> ) }
  63.     </ul>
  64. )
  65.  
  66. export default connect(state => ({ tasks: state.tasks }))(TaskList)
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top