Last active
February 12, 2019 07:58
-
-
Save pedroparra/c11d261fedec0b81925f to your computer and use it in GitHub Desktop.
Ejemplo de store con redux.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React from 'react'; | |
| import ReactDOM from 'react-dom'; | |
| import { createStore } from 'redux'; | |
| // Preparamos nuestra funcion reducer | |
| 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 = 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('MyAppContainer'); | |
| ); | |
| }; | |
| store.subscribe(render); | |
| render(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Line 39: Parsing error: Unexpected token, expected ","
37 | clickRestar={ ()=> store.dispatch({type: 'restar'}) }
38 | />,