Trong ứng dụng React – Redux, mapStateToProps là một hàm được sử dụng để kết nối Redux store với các component. Hàm này giúp truy xuất và đồng bộ dữ liệu từ store và đưa chúng vào trong các props của component. Khi store thay đổi, mapStateToProps sẽ được gọi lại để cập nhật các giá trị trong props của component, từ đó đảm bảo rằng component luôn cập nhật với các giá trị mới nhất từ store.
Hàm mapStateToProps trả về một đối tượng, trong đó các thuộc tính của đối tượng tương ứng với các props của component. Các giá trị của các thuộc tính này sẽ được lấy từ Redux store thông qua các reducer và selector.
Sử dụng hàm mapStateToProps trong React Js
Để sử dụng hàm mapStateToProps trong React – Redux, trước hết chúng ta cần cài đặt thư viện react-redux bằng lệnh sau:
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 { <a href="https://nodemy.vn/tim-hieu-ve-ham-connect-trong-react-redux/">connect</a> } 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 mapStateToProps = (state) => {
return {
count: state.counter.count,
todos: state.todos.items,
};
};
export default connect(mapStateToProps)(MyComponent);
Ở đây, chúng ta định nghĩa hàm mapStateToProps để 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.
class MyComponent extends React.Component {
render() {
return (
<div>
<p>Count: {<a href="https://nodemy.vn/hieu-arrow-function-va-this-trong-javascript-tao-ra-nhung-ham-manh-me-voi-cu-phap-ngan-gon-huong-dan-day-du-cho-nguoi-moi-bat-dau-important/">this</a>.props.count}</p>
<ul>
{this.props.todos.map((<a href="https://nodemy.vn/tao-ung-dung-todo-voi-usestate-trong-react-hook/">todo</a>, index) => (
<li key={index}>{todo}</li>
))}
</ul>
</div>
);
}
}
Ở đâ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
Bài viết có liên quan: Tìm hiểu về memo trong React Js Router trong React Js cho người mới Nên chọn Redux thuần hay Redux toolkit Tim hiểu về function component trong React Js Tìm hiểu về classComponent trong React Js
