react-redux es una librería que nos ayuda a conectar el store con las propiedades del componente. Sin embargo, esta librería no es un requisito para utilizar Redux con React.
El primer paso es instalar la librería con npm o Yarn:
# npmnpm install --save react-redux# yarnyarn add react-redux
El siguiente paso es envolver nuestro componente principal en el componente Provider
de react-redux, al que le vamos a pasar el store. En app.js
:
// acá van todos los importsReactDOM.render(<Provider store={store}><App /></Provider>,document.getElementById('root'));
Y el segundo paso es conectar nuestros componentes utilizando el método connect
, que recibe dos funciones: una que relaciona el estado con las propiedades del componente y otra que relaciona los métodos a propiedades.
Por ejemplo, imagina que tenemos el siguiente componente:
// importsclass TaskList extends Component {constructor() {super();this.state = { tasks: [] };store.subscribe(() => {this.setState({tasks: store.getState().tasks});});}render() {// utiliza this.state.tasks, newTask(..) y removeTask(...)}newTask(task) {store.dispatch(newTask(task));}removeTask() {store.dispatch(removeTask(task));}}
Utilizando react-redux podemos simplificar bastante nuestro componente:
class TaskList extends Component {render() {return (// utiliza this.props.tasks, this.props.newTask, this.props.removeTask);}}const mapState = state => {return {tasks: state.tasks};};const mapMethods = dispatch => {return {newTask(task) {dispatch(newTask(task));},// ... other methods};}export default connect(mapState, mapMethods)(TaskList);
Lo más importante de este código es la última línea que conecta el estado y los métodos con las propiedades del componente. Fíjate que el componente sólo tiene el método render
, así que lo podemos convertir a una función:
const TaskList = props => {return (// utiliza props.tasks, props.newTask, props.removeTask);};// ...
O incluso más elegante utilizando desestructuración de argumentos:
const TaskList = ({ tasks, newTask, removeTask }) => {return (// utiliza tasks, newTask, removeTask);};// ...