Xem Nhiều 5/2022 # Redux Qua Ví Dụ Thực Tế: Redux # Top Trend

Xem 15,840

Cập nhật thông tin chi tiết về Redux Qua Ví Dụ Thực Tế: Redux mới nhất ngày 17/05/2022 trên website Doisonggiaitri.com. Hy vọng nội dung bài viết sẽ đáp ứng được nhu cầu của bạn, chúng tôi sẽ thường xuyên cập nhật mới nội dung để bạn nhận được thông tin nhanh chóng và chính xác nhất. Cho đến thời điểm hiện tại, bài viết này đã đạt được 15,840 lượt xem.

--- Bài mới hơn ---

  • Các Hàm Render & Jsx — Vue.js
  • Giới Thiệu Về Nodejs + Sailsjs
  • Phương Thức Settimeout() Và Setinterval() Trong Javascript
  • Bộ Hẹn Giờ Settimeout() Và Setinterval() Trong Javascript
  • Asp.net – Serialize Đối Tượng .net Thành Json Và Ngược Lại
  • Hôm nay chúng ta sẽ tiếp tục tìm hiểu về Redux và vai trò của nó trong application.

    Redux được mô tả như là một pdictable state container cho application. Phần lớn các bạn thường thấy Redux được đi một cặp với Redux ở client side application. Thực tế, Redux còn hơn thế, giống như Javascript đã lấn sân sang server side với NodeJS hay dùng trong việc phát triển IoT application, Redux có thể được sử dụng ở bất cứ nơi đâu cần một pdictable state container. Bạn phải hiểu và nắm bắt được vấn đề mà nó giải quyết, thì mới nên sử dụng nó.

    Nào cùng bắt đầu tìm hiểu Redux thôi.

    Nói một cách đơn giản, bạn sẽ trigger một action trong component, nó có thể là một button, một text field, hay blabla… sẽ có một thành phần khác listen đến cái action mà bạn vừa trigger, sử dụng payload mà action đó trả về, sinh ra một global state mới từ payload đó sau đó trả ngược lại cho component để nó thực hiện nhiệm vụ render lại nếu cái global state đó có thay đổi so với global state trước đó. Khi component được render xong thì lúc đó chu trình coi như hoàn tất.

    Lý thuyết thế đủ rồi, còn chờ gì nữa mà không bắt tay vào implement nhỉ!

    Từ folder của project các bạn cài đặt như sau.

    npm install --save redux redux-logger

    Bây giời chúng ta sẽ tạo action đầu tiên. Mở file src/index.js lên.

    import React from 'react'; import ReactDOM from 'react-dom'; import TrackList from './components/TrackList'; import {conpStore} from './store'; import * as actions from './actions'; const tracks = ; export default function(state = initialState, action) { switch (action.type) { case ActionTypes.TRACKS_SET: return setTracks(state, action); } return state; } function setTracks(state, action) { const {tracks} = action; return [...state, ...tracks]; }

    Như các bạn có thể thấy, chúng ta sẽ export một anonymous function. Reducer sẽ nhận vào một state và action như tôi đã nói từ trước. Bản thân reducer sẽ phải handle nhiều action type khác nhau, bây giờ thì các bạn nhìn thấy có một, nhưng trong tương lai khi application phình to ra thì cũng nhiều đáng kể đấy. Cũng giống như cách chúng ta làm với action creator, chúng ta sẽ tạo một file index.js trong folder reducers để chứa hết tất cả reducer, và cung cấp ra cho các thành phần khác của application sử dụng.

    import {combineReducers} from 'redux'; import track from './track'; export default combineReducers({ track });

    Để tiết kiệm thời gian, chúng ta sẽ sử dụng helper function của Redux, đó là combineReducers. Thông thường bạn sẽ phải export từng reducer, reducer đó sẽ phải trả về toàn bộ state của application. Khi sử dụng combineReducers, bạn có thể sử dụng multiple reducer mỗi reducer sẽ trả về một substate. Nếu không sử dụng nó bạn sẽ phải access list tracks trong global state như thế này.

    state.tracks

    Nhưng với combineReducers, bạn sẽ get thẳng từ subset của state như sau.

    state.track.tracks

    Rồi, chúng ta đã có action, đã có action type và action creator, rồi chúng ta cũng đã có reducer để xử lý new state. Giờ chúng ta chỉ còn thiếu mỗi store, cái mà chúng ta đã làm từ lúc đầu nhưng vẫn bỏ ngõ trong file src/index.js.

    Hãy nhớ rằng, chúng ta đã dispatch action thông qua store api dispatch.

    store.dispatch(actionCreator(payload))

    Nào cũng tạo store. Tạo file src/store.js.

    import {createStore, applyMiddleware} from 'redux'; import createLogger from 'redux-logger'; import rootReducer from '../reducers/index'; const logger = createLogger(); const createStoreWithMiddleware = applyMiddleware(logger)(createStore); export default function conpStore(initialState) { return createStoreWithMiddleware(rootReducer, initialState); }

    Redux cung cấp cho chúng ta function createStore. Chúng ta chỉ cần function này với những combined reducer chúng ta đã tạo trước đó để tạo store.

    Redux store được khai báo với một middleware, thành phần này sẽ có nhiệm vụ để làm một số nhiệm vụ gì đó giữa khoảnh khắc dispatch action và khoảnh khác payload đến được với reducer. Có hàng tá middleware cho Redux ở ngoài kia, trong bài này, tôi chỉ sử dụng logger middleware để bắt đầu, cũng như để cho các bạn biết tới middleware là gì. Logger middleware sẽ console log pviousStatenextState mỗi khi có action. Giúp chúng ta có thể keep track application một cách dễ dàng hơn. Tại sao chúng ta lại sử dụng nó, hồi sau sẽ rõ.

    Cuối cùng chúng ta sử dụng helper function applyMiddleware để wire store và middleware chúng ta vừa khai báo.

    Việc gì cần làm cũng đã làm xong rồi, thử npm start để xem thành quả nào!

    Lúc này bạn sẽ thấy browser có một màu trắng tinh khôi, nhưng đừng vội buồn vì có lỗi, hãy mở console lên nào, chúng ta sẽ thấy action đã được dispatch.

    Tuy nhiên thì vì chúng ta chưa connect component TrackList với store nên trang trắng là điều đương nhiên.

    Source code trong bài các bạn có thể tìm thấy ở https://github.com/codeaholicguy/react-redux-tutorial/tree/master/redux

    Bài gốc: Codeaholicguy

    --- Bài cũ hơn ---

  • Reactjs Là Gì? 5 Lý Do Khiến Doanh Nghiệp Nên Ứng Dụng Reactjs Ngay!
  • Học Reactjs Trong 15 Phút
  • Jsp – Jsp Life Cycle
  • Jsp] Servlet Là Gì? Vòng Đời Servlet.
  • Tạo Và Xuất Bản Một Jquery Plugin Trong 30 Phút
  • Bạn đang xem bài viết Redux Qua Ví Dụ Thực Tế: Redux trên website Doisonggiaitri.com. Hy vọng những thông tin mà chúng tôi đã chia sẻ là hữu ích với bạn. Nếu nội dung hay, ý nghĩa bạn hãy chia sẻ với bạn bè của mình và luôn theo dõi, ủng hộ chúng tôi để cập nhật những thông tin mới nhất. Chúc bạn một ngày tốt lành!

  • Web hay
  • Links hay
  • Guest-posts
  • Push
  • Chủ đề top 10
  • Chủ đề top 20
  • Chủ đề top 30
  • Chủ đề top 40
  • Chủ đề top 50
  • Chủ đề top 60
  • Chủ đề top 70
  • Chủ đề top 80
  • Chủ đề top 90
  • Chủ đề top 100
  • Bài viết top 10
  • Bài viết top 20
  • Bài viết top 30
  • Bài viết top 40
  • Bài viết top 50
  • Bài viết top 60
  • Bài viết top 70
  • Bài viết top 80
  • Bài viết top 90
  • Bài viết top 100
  • Chủ đề top 10
  • Chủ đề top 20
  • Chủ đề top 30
  • Chủ đề top 40
  • Chủ đề top 50
  • Chủ đề top 60
  • Chủ đề top 70
  • Chủ đề top 80
  • Chủ đề top 90
  • Chủ đề top 100
  • Bài viết top 10
  • Bài viết top 20
  • Bài viết top 30
  • Bài viết top 40
  • Bài viết top 50
  • Bài viết top 60
  • Bài viết top 70
  • Bài viết top 80
  • Bài viết top 90
  • Bài viết top 100