Cách sử dụng slice trong react-redux

Tổng quat

Khi tôi bắt đầu sử dụng redux trong react, tôi cảm thấy nó hơi quá mức cần thiết cho một ứng dụng web lý tưởng. Tôi đã phải quản lý nhiều tệp cho mỗi mô-đun. Có rất nhiều mã gần như giống nhau và phải viết nó cho mọi mô-đun, và tôi luôn nghĩ rằng nếu chúng ta phải viết lặp đi lặp lại cùng một mã thì tại sao nó không được xử lý bởi redux? Khi tôi học về createSlice, tôi cảm thấy những lời cầu nguyện của mình cuối cùng đã được lắng nghe.

CreateSlice là gì

createSlice đi kèm với gói công cụ redux . Nó là một hàm chấp nhận một trạng thái ban đầu, một đối tượng có đầy đủ các hàm giảm thiểu và “tên lát cắt”, đồng thời tự động tạo các trình tạo hành động và các loại hành động tương ứng với các bộ giảm và trạng thái.

Cách createSlice hoạt động?

1. Tạo một cửa hàng Redux với configureStore
   a. configStore chấp nhận một hàm giảm thiểu như một đối số được đặt tên
   b . configStore tự động thiết lập cửa hàng với các cài đặt mặc định tốt
2. Cung cấp kho Redux cho các thành phần ứng dụng React
   a. Đặt một thành phần React-Redux <Provider> xung quanh <App /> của bạn
   b. Chuyển cửa hàng Redux với tư cách <Provider store = {store}>
3. Tạo một trình giảm bớt “lát cắt” Redux với createSlice
   a. Gọi createSlice với một tên chuỗi, một trạng thái ban đầu và các hàm rút gọn được đặt tên
   b. Các chức năng của bộ giảm tốc có thể “thay đổi” trạng thái khi sử dụng Immer
   c. Xuất trình giảm lát cắt đã tạo và trình tạo hành động
4. Sử dụng móc React-Redux useSelector / useDispatch trong các thành phần React
   a. Đọc dữ liệu từ cửa hàng bằng hook useSelector
   b. Nhận chức năng điều phối với móc useDispatch và các hành động điều phối nếu cần

Thư mục src của tôi trông như thế này

Đầu tiên, tạo một lát mô-đun bằng createSlice. Trong thuộc tính Reducers của hàm createSlice, hãy thêm các hàm sẽ giữ logic miền / nghiệp vụ.

Xuất bộ giảm mà bạn sẽ nhận được từ phiên bản Slice.

Nhập trình giảm và chuyển nó vào trình giảm lưu trữ toàn cầu trong khi tạo cửa hàng bằng configStore.

Bây giờ bạn đã có một cửa hàng sẵn sàng, bạn có thể sử dụng nó trong ứng dụng của mình, chuyển nó cho nhà cung cấp và gói thành phần gốc của ứng dụng bởi nhà cung cấp đó.

Nhà cung cấp sẽ cung cấp cửa hàng cho từng thành phần ở mọi cấp bên trong thành phần Ứng dụng. Bây giờ, chúng ta sẽ sử dụng store trong thành phần Counter. Đầu tiên, bạn sẽ cần lấy giá trị từ cửa hàng bằng cách sử dụng hook useSelector

Chúng ta có thể sử dụng trực tiếp biến đếm này để hiển thị số đếm. Bây giờ, chúng tôi sẽ cập nhật cửa hàng và đối với điều đó, chúng tôi sẽ cần hành động có thể được xuất từ ​​phiên bản lát cắt.

Nhập các hành động này vào thành phần và gửi hành động bạn muốn bằng cách sử dụng hàm hook useDispatch. Hàm useDispatch trả về một thể hiện của kiểu Dispatch.

Đó là nó! Bạn có thể thấy cách Slice tạo ra các bộ giảm và hành động cho chúng tôi, tốn ít thời gian hơn và ít mã hơn so với kiến ​​trúc Redux truyền thống. Bây giờ chúng ta đã biết cách tạo một cửa hàng, sử dụng dữ liệu để hiển thị và cập nhật dữ liệu. Đây là ví dụ cơ bản nhất để mọi người có thể hiểu cách sử dụng Slice trong ReactJS.

Nếu bạn muốn biết thêm về react, redux hoặc slice thì hãy cho tôi biết trong phần bình luận.

Ở đây để làm cho cộng đồng mạnh mẽ hơn bằng cách chia sẻ kiến ​​thức. Hãy theo dõi tôi và nhóm của tôi để biết những gì chúng tôi đang bí mật xây dựng 😉.