Redux - React Example
Ecco un piccolo esempio di applicazione React e Redux. Puoi anche provare a sviluppare piccole app. Di seguito viene fornito un codice di esempio per aumentare o diminuire il contatore:
Questo è il file radice che è responsabile della creazione dello store e del rendering del nostro componente dell'app React.
/src/index.js
import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { createStore } from 'redux';
import reducer from '../src/reducer/index'
import App from '../src/App'
import './index.css';
const store = createStore(
reducer,
window.__REDUX_DEVTOOLS_EXTENSION__ &&
window.__REDUX_DEVTOOLS_EXTENSION__()
)
render(
<Provider store = {store}>
<App />
</Provider>, document.getElementById('root')
)
Questa è la nostra componente principale di React. È responsabile del rendering del componente contenitore del contatore da bambino.
/src/app.js
import React, { Component } from 'react';
import './App.css';
import Counter from '../src/container/appContainer';
class App extends Component {
render() {
return (
<div className = "App">
<header className = "App-header">
<Counter/>
</header>
</div>
);
}
}
export default App;
Quello che segue è il componente contenitore che è responsabile di fornire lo stato di Redux per reagire al componente:
/container/counterContainer.js
import { connect } from 'react-redux'
import Counter from '../component/counter'
import { increment, decrement, reset } from '../actions';
const mapStateToProps = (state) => {
return {
counter: state
};
};
const mapDispatchToProps = (dispatch) => {
return {
increment: () => dispatch(increment()),
decrement: () => dispatch(decrement()),
reset: () => dispatch(reset())
};
};
export default connect(mapStateToProps, mapDispatchToProps)(Counter);
Di seguito è riportato il componente di reazione responsabile della parte di visualizzazione:
/component/counter.js
import React, { Component } from 'react';
class Counter extends Component {
render() {
const {counter,increment,decrement,reset} = this.props;
return (
<div className = "App">
<div>{counter}</div>
<div>
<button onClick = {increment}>INCREMENT BY 1</button>
</div>
<div>
<button onClick = {decrement}>DECREMENT BY 1</button>
</div>
<button onClick = {reset}>RESET</button>
</div>
);
}
}
export default Counter;
I seguenti sono i creatori di azioni responsabili della creazione di un'azione:
/actions/index.js
export function increment() {
return {
type: 'INCREMENT'
}
}
export function decrement() {
return {
type: 'DECREMENT'
}
}
export function reset() {
return { type: 'RESET' }
}
Di seguito, abbiamo mostrato la riga di codice per il file del riduttore che è responsabile dell'aggiornamento dello stato in Redux.
reducer/index.js
const reducer = (state = 0, action) => {
switch (action.type) {
case 'INCREMENT': return state + 1
case 'DECREMENT': return state - 1
case 'RESET' : return 0 default: return state
}
}
export default reducer;
Inizialmente, l'app ha il seguente aspetto:
Quando faccio clic su Incrementa due volte, la schermata di output sarà come mostrato di seguito -
Quando lo decrementiamo una volta, mostra la seguente schermata:
E il ripristino riporterà l'app allo stato iniziale che è il valore del contatore 0. Questo è mostrato di seguito -
Cerchiamo di capire cosa succede con gli strumenti di sviluppo Redux quando viene eseguita la prima azione di incremento -
Lo stato dell'app verrà spostato al momento in cui viene inviata solo l'azione di incremento e le restanti azioni vengono ignorate.
Incoraggiamo a sviluppare una piccola app Todo come compito da solo e comprendere meglio lo strumento Redux.