Guías de Make it Real
Search…
Usando la librería react-redux
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:
1
# npm
2
npm install --save react-redux
3
4
# yarn
5
yarn add react-redux
Copied!
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:1
// acá van todos los imports
2
3
ReactDOM.render(
4
<Provider store={store}>
5
<App />
6
</Provider>,
7
document.getElementById('root')
8
);
Copied!
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:
1
// imports
2
3
class TaskList extends Component {
4
constructor() {
5
super();
6
7
this.state = { tasks: [] };
8
store.subscribe(() => {
9
this.setState({
10
tasks: store.getState().tasks
11
});
12
});
13
}
14
15
render() {
16
// utiliza this.state.tasks, newTask(..) y removeTask(...)
17
}
18
19
newTask(task) {
20
store.dispatch(newTask(task));
21
}
22
23
removeTask() {
24
store.dispatch(removeTask(task));
25
}
26
}
Copied!
Utilizando react-redux podemos simplificar bastante nuestro componente:
1
class TaskList extends Component {
2
render() {
3
return (
4
// utiliza this.props.tasks, this.props.newTask, this.props.removeTask
5
);
6
}
7
}
8
9
const mapState = state => {
10
return {
11
tasks: state.tasks
12
};
13
};
14
15
const mapMethods = dispatch => {
16
return {
17
newTask(task) {
18
dispatch(newTask(task));
19
},
20
// ... other methods
21
};
22
}
23
24
export default connect(mapState, mapMethods)(TaskList);
Copied!
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:1
const TaskList = props => {
2
return (
3
// utiliza props.tasks, props.newTask, props.removeTask
4
);
5
};
6
7
// ...
Copied!
O incluso más elegante utilizando desestructuración de argumentos:
1
const TaskList = ({ tasks, newTask, removeTask }) => {
2
return (
3
// utiliza tasks, newTask, removeTask
4
);
5
};
6
7
// ...
Copied!
Last modified 3yr ago
Copy link