Skip to content

Instantly share code, notes, and snippets.

@tzkmx
Created August 11, 2016 23:40
Show Gist options
  • Save tzkmx/bdc5cf0807fbd2bbe054dc32fbb5e9ae to your computer and use it in GitHub Desktop.
Save tzkmx/bdc5cf0807fbd2bbe054dc32fbb5e9ae to your computer and use it in GitHub Desktop.
Redux with jQuery simple example
// original from:https://codepen.io/mdd/pen/wGRqbw
// Reducer
const counter = (state = 0, actions) => {
switch (actions.type) {
case 'INCREMENT': return state + 1;
case 'DECREMENT': return state - 1;
default: return state
}
}
// Store to hold state of the app
const store = Redux.createStore(counter);
// The only way to mutate the internal state is to dispatch an action.
$('#inc').click(() => store.dispatch({type: 'INCREMENT'}));
$('#dec').click(() => store.dispatch({type: 'DECREMENT'}));
// Use subscribe() to update the UI in response to state changes.
store.subscribe(() => {
$('#num').html(store.getState())
});
///////////////////////// Object Reducer Example ////////////////////////////////////
const updateNameReducer = (state = {}, actions) => {
// use destructiong for easy access to action properties
// and also provide default values
let {first_name = '', last_name = ''} = actions;
switch (actions.type) {
case 'UPDATE_FIRST_NAME': return Object.assign({}, state, {first_name: first_name});
case 'UPDATE_LAST_NAME': return Object.assign({}, state, {last_name: last_name});
default: return state
}
}
const updateNameStore = Redux.createStore(updateNameReducer)
$('#firstNameInput').on('input', (e) => {
updateNameStore.dispatch({type: 'UPDATE_FIRST_NAME', first_name: e.target.value});
});
$('#lastNameInput').on('input', (e) => {
updateNameStore.dispatch({type: 'UPDATE_LAST_NAME', last_name: e.target.value});
});
updateNameStore.subscribe(() => {
let {first_name, last_name} = updateNameStore.getState();
$('#firstName').html(first_name);
$('#lastName').html(last_name);
console.log(updateNameStore.getState());
});
<div>
Count = <span id="num">#</span>
<button type="button" id="inc">+</button>
<button type="button" id="dec">-</button>
</div>
<div>
<p>First Name: <span id="firstName"></span></p>
<input id="firstNameInput" type="text" val="" />
<p>Last Name: <span id="lastName"></span></p>
<input id="lastNameInput" type="text" val="" />
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment