Trong React-Redux, mapDispatchToProps là một trong hai hàm kết nối (connect functions) được sử dụng để kết nối các component với store Redux. Hàm này cho phép chúng ta truyền các action creators vào trong các component, từ đó giúp các component thực hiện các thao tác trên store Redux thông qua các action được gửi đến reducers.
Sử dụng hàm mapDispatchToProps trong React Js
npm install react-redux --save
Sau đó, chúng ta import hàm connect() từ react-redux vào trong component cần kết nối với store.
import { connect } from 'react-redux';
Hàm connect() sẽ trả về một hàm khác, mà chúng ta sử dụng để kết nối store với component.
const mapDispatchToProps = dispatch => {
return {
incrementCounter: () => {
dispatch(incrementCounter());
},
decrementCounter: () => {
dispatch(decrementCounter());
}
};
Ở đây, chúng ta định nghĩa hàm mapDispatchToProps để lấy các giá trị từ store. Sau đó, chúng ta sử dụng hàm connect() để kết nối hàm mapStateToProps với component. Kết quả là các giá trị từ store sẽ được lưu vào các props của component.
Trong component, các giá trị được truy cập thông qua props.
import React from 'react';
import { connect } from 'react-redux';
import { incrementCounter, decrementCounter } from '../actions';
const Counter = ({ counter, incrementCounter, decrementCounter }) => {
return (
<div>
<h1><span class="ez-toc-section" id="Counter_counter"></span>Counter: {counter}<span class="ez-toc-section-end"></span></h1>
<button onClick={incrementCounter}>Increment</button>
<button onClick={decrementCounter}>Decrement</button>
</div>
);
};
const mapStateToProps = state => {
return {
counter: state.counter
};
};
const mapDispatchToProps = dispatch => {
return {
incrementCounter: () => {
dispatch(incrementCounter());
},
decrementCounter: () => {
dispatch(decrementCounter());
}
};
};
export default connect(mapStateToProps, mapDispatchToProps)(Counter);
Ở đây, chúng ta truy cập các giá trị từ store thông qua các props count và todos. Khi store thay đổi, hàm mapStateToProps sẽ được gọi lại để cập nhật các giá trị này, và component sẽ được render lại với các giá trị mới nhất từ store.
Kết luận và bài viết có liên quan
Kết luận: hàm mapDispatchToProps là một trong những hàm quan trọng trong React-Redux, giúp kết nối các component với store Redux và cung cấp các action creators cho các component để thực hiện các thao tác trên trạng thái của ứng dụng. Bằng cách sử dụng hàm mapDispatchToProps, ta có thể đơn giản hóa việc quản lý trạng thái của ứng dụng và tạo ra các component tái sử dụng được.
