Redux là gì

Trong bài viết này họ sẽ cùng cả nhà đi tìm hiểu về phong thái tích đúng theo Redux vào vào một dự án ReactJS.

Bạn đang xem: Redux là gì

Bài viết này được đăng trên freetuts.net, không được copy dưới hầu như hình thức.

Redux là 1 trong những thư viện hỗ trợ họ quản lí những state trong các ứng dụng javascript. Có thể khẳng định đó là một tủ sách khá quan trọng nhưng đối với những người mới làm cho quen cùng với Redux câu hỏi tích thích hợp nó vào dự án công trình React không solo giản.

Nội dung bài viết sẽ chỉ ra mỗi bước để tích hòa hợp Redux vào ReactJS một cách chi tiết nhất.

Chúng ta nên đọc thêm bài viết về Redux là gì? lý do lại áp dụng trong ReactJS để có thể hiểu rõ các khái niệm được trình làng ở trong nội dung bài viết này.

1. Thiết đặt Redux

Sau lúc khởi chế tạo ra môt dự án ReactJS, để hoàn toàn có thể sử dụng Redux bọn họ cần phải cài đặt 2 module là redux với react-redux bằng cách sử dụng npm:

npm install redux react-redux --save

Sau khi thiết lập thành công bạn cũng có thể bắt đầu sử dụng redux vào dự án của bản thân rồi !

2. Tích hòa hợp Redux vào ReactJS

Để hiểu rõ hơn về các bước tích hợp Redux chúng ta sẽ đi xây dựng cỗ khung Redux cho một áp dụng ghi chú.

Ở đây bọn họ sẽ chia nhỏ các phần của Redux ra nhiều thư mục. Bạn cũng có thể tìm phát âm về các thành phân đặc biệt của redux ở bài viết giới thiệu về Redux sống trên. Họ sẽ thao tác trong thư mục src.

src/....const/index.js.....actions/index.js....reducers/...index.js----components....App.js

Mỗi thư mục sẽ sở hữu các nhiệm vụ khác nhau :

Trước lúc xây dựng vận dụng dùng Redux bọn họ cần phải hiểu rõ các thành phần có trong ứng dụng, từ kia xây dựng quy mô triển khai Redux một biện pháp khoa học hơn.

Khởi tạo những hằng

Chúng ta vẫn đi khởi tạo các hằng số cung ứng việc thực hiện dự án. Trong file const/index.js họ sẽ khởi tạo thành 1 hằng số cung cấp việc thêm ghi chú.

// const/index.jsexport const ADD_NEW_NOTE = "ADD_NEW_NOTE";

Trong các dự án lớn sẽ sở hữu được rất hiều hằng số, bởi vậy việc khởi tạo thành một thư mục chứa những hằng số là điều trọn vẹn cần thiết.

Khởi chế tác actions

Actions là một object chứa các hành vi mà bạn muốn gửi đến reducers. Trả sử như bọn họ muốn thêm cảnh báo thì họ sẽ hướng dẫn và chỉ định nó bên phía trong actions. Khi mong gửi actions đến reducers chỉ việc gọi store.dispatch(actions). Ở đây họ sẽ chỉ định các actions cung cấp việc thêm chú giải như sau:

// actions/index.jsimport ADD_NEW_NOTE, REMOVE_NOTE, EDIT_NOTE from "../const/index";export const actAddNote = (content) => return type: ADD_NEW_NOTE,content,;;

Mỗi action chúng ta cần nên chỉ định thụôc tính type có giá trị duy nhất. Bởi vì khi action gửi đến reducer nó sẽ dựa vafp nằm trong tính action.type để xác minh mình nên làm gì với state.

Khởi chế tác reducers

Reducers sẽ có nhiệm vụ biến đổi state của ứng dụng dựa vào từng hành vi được giữ hộ đế. Trong những dự án lớn họ cần chia ra rất nhiều reducers không giống nhau. Ở trong thư mục src/reducers sẽ chỉ khởi sản xuất 1 reducers có tên noteReducer.

// reducers/noteReducers.jsimport ADD_NEW_NOTE, REMOVE_NOTE, EDIT_NOTE from "../const/index";const noteReducers = (state = <>, action) => switch (action.type) case ADD_NEW_NOTE:const generateID = new Date().getTime();state = <...state, id: generateID, content: action.content >;return state;default:return state;;export default noteReducers

Chúng ta đã gộp các reducer lại với nhau bằng hàm combineReducer.

Xem thêm: Bài Tập Trắc Nghiệm Tiếng Anh Unit 10 Lớp 12 Có Đáp Án : Endangered Species

// src/reducers/index.jsimport combineReducers from "redux"import noteReducers from "./noteReducer"https://Ở đay chúng ta cũng có thể gộp nhiều reducers// Ở ví dụ này bản thân chỉ có một reducers là noteReducersexport mặc định combineReducers(note: noteReducers)

Tích phù hợp Redux

Sau khi đã tạo nên các thành phần quan trọng trong ứng dụng React họ cần phải khởi tạo Store lưu trữ state. Chúng ta sẽ thao tác làm việc với file src/index.js

// src/index.jsimport React from "react";import ReactDOM from "react-dom";import "./index.css";import app from "./App";import * as serviceWorker from "./serviceWorker";import Provider from "react-redux";import createStore from "redux";//Gọi reducersimport reducers from "./reducers/index";//Tạo storeconst store = createStore(reducers);ReactDOM.render(,document.getElementById("root"));// If you want your tiện ích to work offline & load faster, you can change// unregister() to register() below. Lưu ý this comes with some pitfalls.// Learn more about service workers: https://bit.ly/CRA-PWAserviceWorker.unregister();

Để những component khác hoàn toàn có thể lấy dữ liệu họ cần yêu cầu bọc các component vào trong Provider.

Lấy và cập nhật giá trị của state tự Store

Sau lúc đã dứt xong vớ cả các bước cài đặt Redux cho project, bạn cũng có thể thực hiên rước và cập nhật giá trị của state ngơi nghỉ store về component. Trả sử sống đây chúng ta muốn cửa hàng với store sống component App.js sẽ tiến hành như sau:

// src/App.js//Import kết nối tới react-reduximport connect from "react-redux"https://Import action dùng làm dispatchimport actAddNote from "./actions/index"function App(props) return (...);//Gán dispatch thành propsconst mapDispatchToProps = (dispatch) => return addNote: (content) => dispatch(actAddNote(content))//Gán quý hiếm của state thành propsconst mapStateToProps = (state, ownProps) => return note: state.note//Export component cùng với két nối redux.export default connect(mapStateToProps, mapDispatchToProps)(App)

Để liên kết với redux nghỉ ngơi trong component chúng ta cần nên import hàm kết nối. Ở đây gồm 2 hàm rất là quan trọng giúp thao tác làm việc với state kia là:

Đến đây họ đã tích hợp thành công xuất sắc Redux vào ReactJS, vào loạt bài viết tiếp theo chúng ta sẽ đi xây dựng những ví dụ ví dụ và trực quan rộng nữa. Bên trên đây chúng ta đã thuộc nhau đi kiếm hiểu về áp dụng Redux trong ReactJS. Đây là kiến thức và kỹ năng rất cơ bạn dạng về nó nhưng cũng hết sức quan trọng đặc biệt trong vượt trình làm việc với ReactJS sau này. Mong rằng nội dung bài viết sẽ góp ích cho mình !