Hướng dẫn nhanh để thiết lập ứng dụng React với Redux + Thunk.

Redux là gì?

Redux là một thư viện JavaScript được sử dụng để quản lý trạng thái ứng dụng. Nó có thể được chia thành ba thành phần chính.

1. Cửa hàng
2. Hoạt động
3. Hộp giảm tốc

Một hành động là một đối tượng JavaScript đơn giản có hai thuộc tính: một loại và một trọng tải . Mục đích chính của một hành động là mô tả điều gì đó đã xảy ra trong ứng dụng (ví dụ: người dùng nhấp vào nút để thêm một mặt hàng vào giỏ hàng của họ).

Bộ giảm tốc là một hàm thực hiện ở trạng thái hiện tại và một hành động. Nó xác định cách cập nhật trạng thái dựa trên loại hành động, sau đó trả về trạng thái mới.

Tại sao chúng ta cần Thunk?

Trình tạo hành động là một hàm trả về một actionđối tượng, đối tượng này sau đó được gửi đến cửa hàng Redux. Thông thường, một trình tạo hành động chỉ có thể trả về một đối tượng. Bằng cách cài đặt phần mềm trung gian Thunk, chúng tôi có thể tạo ra các trình tạo hành động trả về một chức năng thay thế. Điều này cho phép ứng dụng của bạn thực hiện các cuộc gọi tìm nạp và tương tác với máy chủ.

So sánh hai người tạo hành động bên dưới.

// returns an object
export const createTodo = todo => {
  return {
    type: "CREATE_TODO",
    payload: todo
  }
}
// returns a function
export const getTodo = () => {
  return(dispatch) => {
    return fetch(url)
    .then(resp => resp.json())
    .then(todo => dispatch({ type: "GET_TODO", payload: todo }))
  })
}

Trước khi chúng tôi bắt đầu

Mục tiêu cho ứng dụng của chúng tôi là hiển thị một nút. Khi nhấp vào nút, một hình ảnh của một con chó ngẫu nhiên sẽ được hiển thị.

Thiết lập Redux

Nếu bạn chưa thiết lập ứng dụng React, hãy tiếp tục và chạy lệnh sau trong thiết bị đầu cuối của bạn.

npx create-react-app redux-app

yarn add redux react-redux redux-thunk

Thiết lập Hộp giảm tốc

Điều hướng đến reducersthư mục đầu tiên. Tạo một tệp có tên dogReducer.js.

// ./src/reducers/dogReducer.js
const dog = (state = '', action) => {
  switch(action.type) {
    case 'CHANGE_IMAGE':
      return action.payload
    default:
      return state
    }
}
export default dog;

Khi ứng dụng của bạn phát triển, bạn có thể cần tạo nhiều hơn một trình giảm bớt. Để làm điều đó, bạn cần tạo một combineReducers.

Điều hướng bên trong reducersthư mục và tạo một tệp có tên index.js.

// ./src/reducers/index.js
import { combineReducers } from 'redux';
import dog from './dogReducer';
import anotherReducer from './anotherReducer';
export default combineReducers({
  dog,
  anotherReducer
})

Điều hướng đến actionsthư mục tiếp theo. Tạo một tệp được gọi là chỉ mục .js.

// ./src/actions/index.js
export const changeImage = () => {
  return(dispatch) => {
    return fetch('https://dog.ceo/api/breeds/image/random')
    .then(resp => resp.json())
    .then(image => dispatch({ type: "CHANGE_IMAGE", payload: image.message }))
  }
}

Điều hướng đến ./src/index.js.

Nhập nội dung sau.

import { Provider } from 'react-redux';
import { createStore, compose, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';

import dog from './reducers/dogReducer';

import rootReducer from './reducers';

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

Sau đó, tạo cửa hàng.

let store = createStore(colors, composeEnhancers(applyMiddleware(thunk)))

<Provider store={store} >
  <App />
</Provider>

Tạo các thành phần DogContainer và Dog

Điều hướng đến ./src.

Tạo DogContainer.js.

Tạo Dog.js.

Sự kết luận

Chạy đi yarn start.

Tại thời điểm này, ứng dụng sẽ được khởi động và chạy.

Tóm lại:

1. Người dùng sẽ nhấp vào nút Thay đổi hình ảnh .
2. Sự kiện nhấp chuột kích hoạt một hành động được gửi đến cửa hàng Redux.
3. Hành động cuối cùng sẽ đến phần mềm trung gian Thunk của chúng tôi. Đây là khi bất kỳ quá trình không đồng bộ nào sẽ xảy ra. Trong trường hợp của chúng tôi, một yêu cầu tìm nạp sẽ được gửi đến một API bên ngoài, API này sẽ trả về URL cho một hình ảnh con chó ngẫu nhiên.
4. Sau khi công việc không đồng bộ của chúng tôi hoàn tất, một đối tượng hành động có thuộc tính tải trọng chứa URL hình ảnh của chúng tôi sẽ được gửi đến Bộ giảm tốc.
5. Bộ giảm tốc sẽ nhận trạng thái trước đó và đối tượng hành động hiện tại. Nó sẽ trả về một trạng thái mới với giá trị được đặt thành URL hình ảnh.
6. Thay đổi trạng thái sẽ kích hoạt kết xuất lại, hiển thị hình ảnh con chó mới của chúng tôi.