Posts

JS-ReactRedux : Connect Redux to the Messages App

// Redux: const ADD = 'ADD' ; const addMessage = (message) => { return { type : ADD, message: message } }; const messageReducer = (state = [], action) => { switch (action.type) { case ADD: return [ ...state, action.message ]; default : return state; } }; const store = Redux.createStore(messageReducer); // React: class Presentational extends React.Component { constructor (props) { super (props); this .state = { input: '' , messages: [] } this .handleChange = this .handleChange.bind( this ); this .submitMessage = this .submitMessage.bind( this ); } handleChange(event) { this .setState({ input: event.target.value }); } submitMessage() { const currentMessage = this .state.input; this .setState({ input: '' , messages: this .state.message...
Post a Comment
Read more

JS-Redux: action.type && store.subscribe() && Combine Multiple Reducer

/*const For action.type*/ const LOGIN='LOGIN'; const LOGOUT='LOGOUT'; const defaultState = {   authenticated: false }; const authReducer = (state = defaultState, action) => {   switch (action.type) {     case LOGIN:       return {         authenticated: true       }     case LOGOUT:       return {         authenticated: false       }     default:       return state;   } }; const store = Redux.createStore(authReducer); const loginUser = () => {   return {     type: LOGIN   } }; const logoutUser = () => {   return {     type: LOGOUT   } }; /*store.subscribe() function*/ const ADD = 'ADD'; const reducer = (state = 0, action) => {   switch(action.type) {     case ADD: ...
Post a Comment
Read more

JS-Redux-Handle An Action

/*Handle an Action*/ const defaultState = {   login: false }; const reducer = (state = defaultState, action) => {   return action.type==='LOGIN' ? state={login:true} : state }; const store = Redux.createStore(reducer); const loginAction = () => {   return {     type: 'LOGIN'   } }; /*Switch Statement to Handle Multiple Actions*/ const defaultState = {   authenticated: false }; const authReducer = (state = defaultState, action) => {  switch(action.type) {     case 'LOGIN':        return {authenticated: true};     case 'LOGOUT':        return {authenticated: false};     default:        return state;     } }; const store = Redux.createStore(authReducer); const loginUser = () => {   return {     type: 'LOGIN'   } }; const logoutUser = () ...
Post a Comment
Read more

JS-Redux: Redux Store And action.type Properties

Create a Redux Store const reducer = (state = 5 ) => { return state; } const store=Redux.createStore(reducer) Get State from the Redux Store const store = Redux.createStore( (state = 5 ) => state ); const currentState=store.getState() Define a Redux Action const action={ type : 'LOGIN' } Define an Action Creator const action = { type : 'LOGIN' } function actionCreator(){ return action } Dispatch an Action Event const store = Redux.createStore( (state = {login: false }) => state ); const loginAction = () => { return { type : 'LOGIN' } }; store.dispatch(loginAction ()); store.dispatch({ type : 'LOGIN' });
Post a Comment
Read more

JS-React: condition ? expressionIfTrue : expressionIfFalse

If they ask "how old are you" before entering the club,this is a good training. HTML(none) <div id="app"></app> CSS(sass) html, body   height: 100%    body   background: #333   display: flex   justify-content: center   align-items: center   font-family: Helvetica Neue    h1   font-size: 2em   color: #eee   display: inline-block a   color: white p   margin-top: 1em   text-align: center   color: #aaa JAVASCRIPT(babel) const inputStyle = {   width: 235,   margin: 5 }; class CheckUserAge extends React.Component {   constructor(props) {     super(props);     this.state = {       input: "",       userAge: ""     };     this.submit = this.submit.bind(this);     this.handleChange = this.handleChange.bind(this);   } ...
Post a Comment
Read more

JS-React: if-else Condition In The render()

HTML(none) <div id="app"></div> CSS(sass) html, body   height: 100%    body   background: #333   display: flex   justify-content: center   align-items: center   font-family: Helvetica Neue    h1   font-size: 2em   color: #eee   display: inline-block JAVASCRIPT(babel) class MyComponent extends React.Component {   constructor(props) {     super(props);     this.state = {       display: true     }     this.leopardDisplay = this.leopardDisplay.bind(this);   }   leopardDisplay() {     this.setState({       display: !this.state.display     });   }   render() {     if(this.state.display) return (        <div>          <button onClick={this.leopardDisplay}>Snow Leo...
Post a Comment
Read more

JS-React: Event Listener

HTML <div id="pdiv">   <p>Press Enter</p> </div> <div id="app"> </div> CSS(sass) html, body   height: 100%    body   background: #333   display: flex   justify-content: center   align-items: center   font-family: Helvetica Neue    h1   font-size: 2em   color: lightblue   display: inline-block    p   font-size: 1.8em   font-family: Verdana   color: black JAVASCRIPT(babel) class MyComponent extends React.Component {   constructor(props) {     super(props);     this.state = {       message: ""     };     this.handleEnter = this.handleEnter.bind(this);     this.handleKeyPress = this.handleKeyPress.bind(this);   }   componentDidMount() {     document.addEventListener("keydown", this.handleKeyPress);   ...
Post a Comment
Read more