Extract-local-state-into-redux in create-react-app

Extract-local-state-into-redux in create-react-app
0

#1

hello, can somebody help me ??
i take this code in create-react-app ,Snipaste_2018-07-23_20-47-59
it just print some little dots, but any wod…

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


//redux 
const ADD='ADD';
const addMessage=(message)=>{
    return{
        type:ADD,
        messgage:message
    }
};
const messageReducer=(state=[],action)=>{
    switch(action.type){
        case ADD:return [...state,action.message];
        default:return state;
    }
}

const store =createStore(messageReducer);

//react
class Display extends React.Component{
  constructor(props) {
      super(props)
      this.state={
          input:'',
    
      }
      this.handleChange=this.handleChange.bind(this);
      this.submitMessage=this.submitMessage.bind(this);
  }
  handleChange(e){
      this.setState({
          input:e.target.value
      })
  }
  submitMessage(){
      this.props.dispatch1(this.state.input);
      this.setState({
          input:''
      })
  }

  render() {
      return (
          <div>
              <h2>Type in a new message:</h2>
              <input placeholder="let's go" value={this.state.input} onChange={this.handleChange} /><br/>
              <button onClick={this.submitMessage}>SUBMIT</button>
              <ul>
                  {this.props.message.map((val,index)=>{
                      return <li key={index}>{val}</li>
                  })}
              </ul>
          </div>
      )
  }
  
}
//react-redux
const state=[];
const mapStateToProps = (state) => {
    return {
        message: state
    }
};

const mapDispatchToProps = (dispatch) => {
    return {
        dispatch1: (message) => {
            dispatch(addMessage(message));
        }
    }
};
const Container=connect(mapStateToProps,mapDispatchToProps)(Display);


class App extends React.Component{ 
    render(){
        return(<Provider store={store}>
            <Container/>
        </Provider>)
    }
}
ReactDOM.render(<App/>,document.getElementById('root'));

#2

You misspelled message before the colon


#3

thank you .bro , i fixed it ,but it still doesn’t work…


#4

That’s strange. I tried it on my computer and it seems to work fine (that typo’s literally the only thing I changed)