Posts
JS-ReactRedux : Connect Redux to the Messages App
- Get link
- X
- Other Apps
// 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...
JS-Redux: action.type && store.subscribe() && Combine Multiple Reducer
- Get link
- X
- Other Apps
/*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: ...
JS-Redux-Handle An Action
- Get link
- X
- Other Apps
/*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 = () ...