Redux example
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.6.0/redux.js"></script>
<div id="root"></div>
Babel + JSX
const myReducer = (state = 0, action) => {
switch(action.type) {
case 'sumar':
return state + 1;
case 'restar':
return state - 1;
default:
return state;
}
}
// Inicializamos el store pasándole el reducer
const store = Redux.createStore(myReducer);
// Creamos nuestro componente de react
const Counter = ({value, clickSumar, clickRestar}) => (
<div>
<h1>{value}</h1>
<button onClick={clickSumar}>Sumar</button>
<button onClick={clickRestar}>Restar</button>
</div>
);
// Renderizamos el componente.
// Cada vez que el stado cambie, el componente
// se volverá a renderizar.
const render = () => {
ReactDOM.render(
<Counter
value={store.getState()}
clickSumar={ ()=> store.dispatch({type: 'sumar'}) }
clickRestar={ ()=> store.dispatch({type: 'restar'}) }
/>,
document.getElementById('root')
);
};
store.subscribe(render);
render();