Tìm hiểu về hàm mapStateToProps trong React - Redux

Giới thiệu mapStateToProps trong React - Redux

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

Kết luận:Trong bài viết này, chúng ta đã tìm hiểu về hàm mapStateToProps trong React-Redux và cách sử dụng nó để kết nối các state trong store của Redux với props của component trong React. Chúng ta cũng đã tìm hiểu về cách mapStateToProps truy xuất và chia sẻ state của store trong React-Redux và cách nó giúp cho việc quản lý state trở nên dễ dàng hơn. Bằng cách sử dụng mapStateToProps, chúng ta có thể giảm bớt các lỗi cố gắng truy xuất state từ store một cách trực tiếp trong component và giúp chúng ta tạo ra các ứng dụng React-Redux đáng tin cậy và dễ bảo trì hơn.
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

Leave a Reply

Your email address will not be published. Required fields are marked *