Basic Redux

Author: rembertdesigns

react.js

@@ -2138,3 +2138,94 @@ function mapDispatchToProps(dispatch) {
   };
 };
 export default connect(mapStateToProps, mapDispatchToProps)(App);
+
+
+
+// SINGLE FILE BASIC REDUX
+import React from 'react';
+import { createStore } from "redux";
+import { connect } from "react-redux";
+import { Provider as ReduxProvider } from "react-redux";
+// action type
+const ADD = 'ADD';
+// action
+const addMessage = (message) => {
+  return { type: ADD, message: message }
+};
+// reducer
+const messageReducer = (state = [], action) => {
+  switch (action.type) {
+    case ADD:
+      return [
+        ...state,
+        action.message
+      ];
+    default:
+      return state;
+  }
+};
+// component
+class Presentational extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      input: ''
+    }
+    this.handleChange = this.handleChange.bind(this);
+    this.submitMessage = this.submitMessage.bind(this);
+  }
+  handleChange(event) {
+    this.setState({
+      input: event.target.value
+    });
+  }
+  submitMessage() {
+    this.props.submitNewMessage(this.state.input);
+    this.setState({
+      input: ''
+    });
+  }
+  render() {
+    return (
+      <div>
+        <h2>Type in a new Message:</h2>
+        <input
+          value={this.state.input}
+          onChange={this.handleChange}/><br/>
+        <button onClick={this.submitMessage}>Submit</button>
+        <ul>
+          {this.props.messages.map( (message, idx) => {
+              return (
+                 <li key={idx}>{message}</li>
+              )
+            })
+          }
+        </ul>
+      </div>
+    );
+  }
+};
+// getting state from redux into props
+const mapStateToProps = (state) => {
+  return {messages: state}
+};
+// dispatching data to redux
+const mapDispatchToProps = (dispatch) => {
+  return {
+    submitNewMessage: (message) => {
+      dispatch(addMessage(message))
+    }
+  }
+};
+// store
+const store = createStore(messageReducer);
+const Container = connect(mapStateToProps, mapDispatchToProps)(Presentational);
+class AppWrapper extends React.Component {
+  render() {
+    return (
+      <ReduxProvider store={store}>
+        <Container/>
+      </ReduxProvider>
+    );
+  }
+};