Arrow function component.

Demo-react-redux.js

import React, { Component, useState } from 'react';
import ReactDOM from 'react-dom';
import {Provider, connect} from 'react-redux'

import {createStore, combineReducers} from 'redux';

// action type
const ADD_LIST = "add_list";
const REMOVE_ITEM = "remove_item";

// action 
const add_item = (item) => ({
  type: ADD_LIST,
  payload: item
});
const remove_item =(item) => ({
  type: REMOVE_ITEM,
  payload: item
})

const reducer = (state = [], action) => {
  switch (action.type) {
    case ADD_LIST:{
      return [...state, action.payload];
    }

    case REMOVE_ITEM:{
      return [...state.filter((i)=>!(action.payload == i))];
    }
  
    default:
      return state;
  }
}

const store = createStore(
  reducer,
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
  );

// store.subscribe(() => console.log("subscribe:", store.getState()));

// store.dispatch(add_item("google"));
// store.dispatch(add_item("twitter"));
// store.dispatch(remove_item("google"));

// export className Demo extends Component {
//   constructor(props) {
//     super(props);
//     this.state = {
//       task:''
//     }
//     this.updateList = this.updateList.bind(this);
//   }

//   updateList = () => {
//     this.props.add_item(this.state.task);
//     this.setState({task: ''});
//   }

//   render() {
//     return (
//       <div>
//         <input onChange={e => this.setState({task: e.target.value})} value={this.state.task} />
//         <button onClick={this.updateList}>add todo</button>
//         <p>{this.state.task}</p>
//       </div>
//     )
//   }
// }

let Demo = ({addItem}) => {
  const [state, setstate] = useState({task: ""});
  const handChange = (event) => setstate({task: event.target.value});
  const updateList = () => {
    addItem(state.task);
    setstate({task: ""});
  }
  return (
    <div className="input-group mb-3">
      <input type="text" className="form-control" onChange={handChange} value={state.task} placeholder="To-dos" aria-label="To-dos" aria-describedby="button-addon2" />
      <div className="input-group-append">
        <button onClick={updateList} className="btn btn-outline-secondary" type="button" id="button-addon2">Add todo</button>
      </div>
      {/* <div className="">{state.task}</div>  */}
    </div>
  )
}

const mapDispatchToProps_Demo = dispatch => ({
  addItem: (i) => dispatch(add_item(i))
})
Demo = connect(null, mapDispatchToProps_Demo)(Demo);

let ListItems = ({store, deleteItem}) => {
  const listComponent = store.map( (item) => <li key={item} onClick={()=>deleteItem(item)}>{item}</li> );
  return <ul>{listComponent}</ul>
} 

const mapStateToProps = store => ({store})

const mapDispatchToProps = dispatch => ({deleteItem: (i) => dispatch(remove_item(i))})

ListItems = connect(mapStateToProps, mapDispatchToProps)(ListItems)

const App = () => {
  return (
    <Provider store={store}>
      <Demo />
      <ListItems />
    </Provider>
  )
}

const rootElement = document.getElementById('app');
ReactDOM.render(<App />, rootElement);

Header

Blod
Italic

quote
code
url

• twitter
• google
• facebook

@mention

#issue