Exercícios de react + redux

Author: leonardomleitao

exercicios_react/ex/field.jsx exercicios_react/ex.18/field.jsxexercicios_react/ex/field.jsx renamed to exercicios_react/ex.18/field.jsx

@@ -1,4 +1,5 @@
 import React, { Component } from 'react'
+import { connect } from 'react-redux'
 
 class Field extends Component {
 
@@ -16,11 +17,15 @@ class Field extends Component {
     render() {
         return (
             <div>
-                <label>{this.state.value}</label><br />
-                <input onChange={this.handleChange} value={this.state.value} />
+                <label>{this.props.value}</label><br />
+                <input onChange={this.handleChange} value={this.props.value} />
             </div>
         )
     }
 }
-
-export default Field
+function mapStateToProps(state) {
+    return {
+        value: state.field.value
+    }
+}
+export default connect(mapStateToProps)(Field)

exercicios_react/ex.18/index.jsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import { combineReducers, createStore } from 'redux'
+import { Provider } from 'react-redux'
+
+import Field from './field'
+
+const reducers = combineReducers({
+    field: () => ({ value: 'Opa' })
+})
+
+ReactDOM.render(
+    <Provider store={createStore(reducers)}>
+        <Field initialValue='Teste' />
+    </Provider>
+, document.getElementById('app'))

exercicios_react/ex.19/field.jsx

@@ -0,0 +1,36 @@
+import React, { Component } from 'react'
+import { connect } from 'react-redux'
+import { bindActionCreators } from 'redux'
+import { changeValue } from './fieldActions'
+
+class Field extends Component {
+
+    constructor(props) {
+        super(props)
+        this.state = { value: props.initialValue }
+
+        this.handleChange = this.handleChange.bind(this)
+    }
+
+    handleChange(event) {
+        this.setState({ value: event.target.value })
+    }
+
+    render() {
+        return (
+            <div>
+                <label>{this.props.value}</label><br />
+                <input onChange={this.props.changeValue} value={this.props.value} />
+            </div>
+        )
+    }
+}
+function mapStateToProps(state) {
+    return {
+        value: state.field.value
+    }
+}
+function mapDispatchToProps(dispatch) {
+    return bindActionCreators({ changeValue }, dispatch)
+}
+export default connect(mapStateToProps, mapDispatchToProps)(Field)

exercicios_react/ex.19/fieldActions.js

@@ -0,0 +1,7 @@
+export function changeValue(e) {
+    console.log('changeValue')
+    return {
+        type: 'VALUE_CHANGED',
+        payload: e.target.value
+    }
+}

exercicios_react/ex.19/fieldReducer.js

@@ -0,0 +1,10 @@
+const INITIAL_STATE = { value: 'Opa' }
+
+export default function(state = INITIAL_STATE, action) {
+    switch(action.type) {
+        case 'VALUE_CHANGED':
+            return { value: action.payload }
+        default:
+            return state
+    }
+}

exercicios_react/ex.19/index.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import { combineReducers, createStore } from 'redux'
+import { Provider } from 'react-redux'
+
+import Field from './field'
+import fieldReducer from './fieldReducer'
+
+const reducers = combineReducers({
+    field: fieldReducer
+})
+
+ReactDOM.render(
+    <Provider store={createStore(reducers)}>
+        <Field initialValue='Teste' />
+    </Provider>
+, document.getElementById('app'))

exercicios_react/ex.20/counter.jsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+import { inc, dec, stepChanged } from './counterActions'
+
+const Counter = props => (
+    <div>
+        <h1>{props.counter.number}</h1>
+        <input onChange={props.stepChanged}
+            value={props.counter.step} type='number' />
+        <button onClick={props.dec}>Dec</button>
+        <button onClick={props.inc}>Inc</button>
+    </div>
+)
+
+const mapStateToProps = state => ({ counter: state.counter })
+const mapDispatchToProps = 
+    dispatch => bindActionCreators({ inc, dec, stepChanged }, dispatch)
+export default connect(mapStateToProps, mapDispatchToProps)(Counter)

exercicios_react/ex.20/counterActions.js

@@ -0,0 +1,14 @@
+export function inc() {
+    return { type: 'INC' }
+}
+
+export function dec() {
+    return { type: 'DEC' }
+}
+
+export function stepChanged(e) {
+    return {
+        type: 'STEP_CHANGED',
+        payload: e.target.value
+    }
+}

exercicios_react/ex.20/counterReducer.js

@@ -0,0 +1,14 @@
+const INITIAL_STATE = { step: 1, number: 0 }
+
+export default function(state = INITIAL_STATE, action) {
+    switch(action.type) {
+        case 'INC':
+            return { ...state, number: state.number + state.step }
+        case 'DEC':
+            return { ...state, number: state.number - state.step }
+        case 'STEP_CHANGED':
+            return { ...state, step: +action.payload }
+        default:
+            return state
+    }
+}

exercicios_react/ex.20/index.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import { combineReducers, createStore } from 'redux'
+import { Provider } from 'react-redux'
+
+import counterReducer from './counterReducer'
+import Counter from './counter'
+
+const reducers = combineReducers({
+    counter: counterReducer
+})
+
+ReactDOM.render(
+    <Provider store={createStore(reducers)}>
+        <Counter />
+    </Provider>
+, document.getElementById('app'))