Tutoriales react y redux

Conceptos de Redux (puros)

https://code.tutsplus.com/es/tutorials/getting-started-with-redux-why-redux–cms-30349

Ejemplo de app de contactos (incompleta):

https://code.tutsplus.com/es/tutorials/getting-started-with-redux-learn-by-example–cms-30350

Un ejemplo extenso:

https://www.valentinog.com/blog/redux/

Otro tutorial sencillo:

https://daveceddia.com/redux-tutorial/

Página oficial:

https://react-redux.js.org/introduction/quick-start

Crear proyecto con React y Redux

npx create-react-app redux-counter

cd redux-counter

npm install –save redux react-redux

Creamos Counter.js:

import React from 'react';

class Counter extends React.Component {
  state = { count: 0 }

  increment = () => {
    this.setState({
      count: this.state.count + 1
    });
  }

  decrement = () => {
    this.setState({
      count: this.state.count - 1
    });
  }

  render() {
    return (
      <div>
        <h2>Counter</h2>
        <div>
          <button onClick={this.decrement}>-</button>
          <span>{this.state.count}</span>
          <button onClick={this.increment}>+</button>
        </div>
      </div>
    )
  }
}

export default Counter;

Después de modificarlo:

import React from 'react';
import { connect } from 'react-redux';

function mapStateToProps(state) {
  return {
    count: state.count
  };
}

    
class Counter extends React.Component {
  //state = { count: 0 }

  increment = () => {
   this.props.dispatch({ type: "INCREMENT" });
  }

  decrement = () => {
  this.props.dispatch({ type: "DECREMENT" });
  }

  render() {
    return (
      <div>
        <h2>Counter</h2>
        <div>
          <button onClick={this.decrement}>-</button>
          <span>{this.props.count}</span>
          <button onClick={this.increment}>+</button>
        </div>
      </div>
    )
  }
}

export default connect(mapStateToProps)(Counter);

App

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Counter from './Counter';
import { createStore } from 'redux';
import { Provider } from 'react-redux';

const initialState = {
  count: 0
};
function reducer(state = initialState, action) {
  console.log('reducer', state, action);
  switch (action.type) {
    case 'INCREMENT':
      return {
        count: state.count + 1
      };
    case 'DECREMENT':
      return {
        count: state.count - 1
      };
    case 'RESET':
      return {
        count: 0
      };
    default:
      return state;
  }
}
const store = createStore(reducer);

function App() {
  return (
    <Provider store={store}>
      <Counter />
    </Provider>
  );
}

export default App;

Ejercicio Partidas Rol

Vamos a crear un MVC para mantener una base de datos de partidas de rol y también una web API Rest y un frontend de React que hagan lo mismo.

La base de datos será así:

Jugador: Nombre, mail y alias
Partida: Nombre, juego, fecha y hora, dificultad

Todas las partidas tienen 1 creador.
Los jugadores pueden participar en varias partidas y una partida se compone de varios jugadores.

Tendremos que hacer:

1.- MVC con Code First (recordad en scaffolding)
2.- Web API Rest
3.- Probar API con Postman
4.- Diseñar el frontend, pantallas que tendrá, como se realizarán las acciones
5.- Construir el frontend en React: Crear las rutas, los componentes, hacer las llamadas a la api…