Tôi mới phát hiện ra Redux . Tất cả có vẻ tốt. Có bất kỳ nhược điểm, gotcha hoặc thỏa hiệp nào khi sử dụng Redux trên Flux không? Cảm ơn

Redux tác giả ở đây!

Tôi muốn nói rằng bạn sẽ thực hiện các thỏa hiệp sau bằng cách sử dụng nó:

• Bạn sẽ cần phải học cách tránh đột biến. Flux không có ý định về việc đột biến dữ liệu, nhưng Redux không thích đột biến và nhiều gói bổ sung cho Redux cho rằng bạn không bao giờ thay đổi trạng thái. Bạn có thể thực thi điều này với các gói chỉ dành cho nhà phát triển như redux-bất biến-trạng thái bất biến , sử dụng Immutable.js hoặc tin tưởng bản thân và nhóm của bạn để viết mã không đột biến, nhưng đó là điều bạn cần phải biết và điều này cần phải là một quyết định có ý thức được chấp nhận bởi nhóm của bạn.

• Bạn sẽ phải cẩn thận chọn gói của bạn. Mặc dù Flux rõ ràng không cố gắng giải quyết các vấn đề gần đó của Keith như hoàn tác / làm lại , kiên trì hoặc các hình thức , Redux có các điểm mở rộng như phần mềm trung gian và các chất tăng cường lưu trữ, và nó đã tạo ra một hệ sinh thái trẻ nhưng giàu có . Điều này có nghĩa là hầu hết các gói là những ý tưởng mới và chưa nhận được khối lượng sử dụng quan trọng. Bạn có thể phụ thuộc vào một cái gì đó rõ ràng là một ý tưởng tồi trong vài tháng sau đó, nhưng thật khó để nói.

• Bạn sẽ không có một tích hợp Flow đẹp. Flux hiện cho phép bạn thực hiện kiểm tra loại tĩnh rất ấn tượng mà Redux chưa hỗ trợ . Chúng tôi sẽ đến đó, nhưng sẽ mất một thời gian.

Tôi nghĩ rằng đầu tiên là trở ngại lớn nhất cho người mới bắt đầu, thứ hai có thể là một vấn đề cho những người chấp nhận sớm quá nhiệt tình, và thứ ba là peeve thú cưng cá nhân của tôi. Ngoài ra, tôi không nghĩ việc sử dụng Redux mang lại bất kỳ nhược điểm cụ thể nào mà Flux tránh được, và một số người nói rằng nó thậm chí còn có một số nhược điểm so với Flux.

Xem thêm câu trả lời của tôi về những mặt tích cực của việc sử dụng Redux .

Cả Redux và Flux đều yêu cầu một số lượng đáng kể mã soạn sẵn để bao gồm nhiều mẫu phổ biến, đặc biệt là các mẫu liên quan đến tìm nạp dữ liệu không đồng bộ. Tài liệu Redux đã có một số ví dụ để giảm bản tóm tắt: http://redux.js.org/docs/recipes/ReducingBoilerplate.html . Bạn có thể nhận mọi thứ bạn cần từ thư viện Flux như Alt hoặc Fluxxor, nhưng Redux thích tự do hơn các tính năng. Điều này có thể là một nhược điểm đối với một số nhà phát triển vì Redux đưa ra một số giả định nhất định về trạng thái của bạn có thể vô tình bị coi thường.

Cách duy nhất để bạn thực sự trả lời câu hỏi của mình là thử Redux nếu có thể, có lẽ trong một dự án cá nhân. Redux ra đời vì nhu cầu trải nghiệm nhà phát triển tốt hơn và nó thiên về lập trình chức năng. Nếu bạn không quen thuộc với các khái niệm chức năng như bộ giảm tốc và thành phần chức năng thì bạn có thể bị chậm lại, nhưng chỉ một chút. Ưu điểm của việc nắm bắt những ý tưởng này trong luồng dữ liệu là thử nghiệm và dự đoán dễ dàng hơn.

Tuyên bố miễn trừ trách nhiệm: Tôi đã chuyển từ Flummox (một triển khai Flux phổ biến) sang Redux và những mặt tích cực vượt xa mọi nhược điểm. Tôi thích ma thuật ít hơn nhiều trong mã của tôi. Ít ma thuật hơn với chi phí cao hơn một chút, nhưng đó là một cái giá rất nhỏ phải trả.

Thông lượng và Redux . . .

Redux không phải là một triển khai Flux thuần túy nhưng chắc chắn được lấy cảm hứng từ Flux. Sự khác biệt lớn nhất là nó sử dụng một cửa hàng duy nhất bao bọc một đối tượng trạng thái có chứa tất cả trạng thái cho ứng dụng của bạn. Thay vì tạo các cửa hàng như bạn sẽ làm trong Flux, bạn sẽ viết các hàm giảm tốc sẽ thay đổi một trạng thái đối tượng duy nhất. Đối tượng này đại diện cho tất cả các trạng thái trong ứng dụng của bạn. Trong Redux, bạn sẽ nhận được trạng thái và hành động hiện tại và trả về trạng thái mới. Điều đó có nghĩa là các hành động là tuần tự và trạng thái là bất biến. Điều đó đưa tôi đến con lừa rõ ràng nhất trong Redux (theo ý kiến ​​của tôi).

Tại sao bất biến?

Có một vài lý do cho điều đó:
1. Sự kết hợp - trạng thái của cửa hàng luôn bị thay đổi bởi một bộ giảm tốc để dễ dàng theo dõi ai thay đổi cái gì.
2. Hiệu suất - vì nó không thay đổi, Redux chỉ cần kiểm tra xem trạng thái trước đó! == trạng thái hiện tại và nếu có để hiển thị. Không cần phải lặp lại trạng thái mỗi lần để xác định kết xuất.
3. Gỡ lỗi - các khái niệm tuyệt vời mới như Gỡ lỗi du hành thời gian và Tải lại nóng .

CẬP NHẬT: nếu điều đó không đủ sức thuyết phục, hãy xem Lee Byron nói tuyệt vời về Giao diện người dùng bất biến .

Redux yêu cầu kỷ luật (các) nhà phát triển thông qua codebase / library để duy trì ý tưởng này. Bạn sẽ cần đảm bảo rằng bạn chọn thư viện và viết mã theo cách không thể thay đổi.

Nếu bạn muốn tìm hiểu thêm về việc triển khai các khái niệm Flux khác nhau (và những gì phù hợp nhất với nhu cầu của bạn), hãy xem bài so sánh hữu ích này .

Sau khi nói điều đó, tôi phải thừa nhận rằng Redux là nơi phát triển tương lai của JS (như để viết những dòng này).

Một trong những lợi ích lớn nhất trong việc sử dụng Redux so với các lựa chọn thay thế Flux khác là khả năng định hướng lại suy nghĩ của bạn theo hướng tiếp cận nhiều chức năng hơn. Một khi bạn hiểu làm thế nào tất cả các dây kết nối, bạn nhận ra sự thanh lịch và đơn giản tuyệt vời của nó trong thiết kế, và không bao giờ có thể quay trở lại.

Tôi thích sử dụng Redux hơn vì nó sử dụng một cửa hàng giúp quản lý nhà nước dễ dàng hơn nhiều so với Flux , Redux DevTools là công cụ thực sự hữu ích cho phép bạn xem những gì bạn làm với trạng thái của mình với một số dữ liệu hữu ích và thực sự phù hợp với các công cụ phát triển React.

Ngoài ra Redux đã linh hoạt hơn khi sử dụng với các khung phổ biến khác như Angular . Dù sao, hãy xem Redux giới thiệu bản thân như một khuôn khổ.

Redux có ba nguyên tắc có thể giới thiệu Redux rất tốt và chúng cũng là điểm khác biệt chính giữa Redux và Flux.

Nguồn duy nhất của sự thật

Trạng thái của toàn bộ ứng dụng của bạn được lưu trữ trong một cây đối tượng trong một cửa hàng.

Điều này giúp dễ dàng tạo các ứng dụng phổ quát, vì trạng thái từ máy chủ của bạn có thể được tuần tự hóa và ngậm nước vào máy khách mà không cần thêm nỗ lực mã hóa. Một cây trạng thái duy nhất cũng giúp dễ dàng gỡ lỗi hoặc kiểm tra một ứng dụng; nó cũng cho phép bạn duy trì trạng thái phát triển ứng dụng của mình để có chu kỳ phát triển nhanh hơn. Một số chức năng thường khó thực hiện - chẳng hạn như Hoàn tác / Làm lại - có thể đột nhiên trở nên tầm thường khi thực hiện, nếu tất cả trạng thái của bạn được lưu trữ trong một cây.

console.log(store.getState())

/* Prints
{
  visibilityFilter: 'SHOW_ALL',
  todos: [
    {
      text: 'Consider using Redux',
      completed: true,
    },
    {
      text: 'Keep all state in a single tree',
      completed: false
    }
  ]
}
*/

Trạng thái chỉ đọc

Cách duy nhất để thay đổi trạng thái là phát ra một hành động, một đối tượng mô tả những gì đã xảy ra.

Điều này đảm bảo rằng cả các khung nhìn và các cuộc gọi lại mạng sẽ không bao giờ ghi trực tiếp vào trạng thái. Thay vào đó, họ thể hiện ý định biến đổi nhà nước. Bởi vì tất cả các thay đổi được tập trung và diễn ra từng cái một theo một trật tự nghiêm ngặt, không có điều kiện chủng tộc tinh tế nào để đề phòng. Vì các hành động chỉ là các đối tượng đơn giản, chúng có thể được ghi lại, tuần tự hóa, lưu trữ và sau đó được phát lại cho mục đích gỡ lỗi hoặc thử nghiệm.

store.dispatch({
  type: 'COMPLETE_TODO',
  index: 1
})

store.dispatch({
  type: 'SET_VISIBILITY_FILTER',
  filter: 'SHOW_COMPLETED'
})

Thay đổi được thực hiện với các chức năng thuần túy

Để chỉ định cách cây trạng thái được chuyển đổi bằng hành động, bạn viết các bộ giảm tốc thuần túy.

Các bộ giảm chỉ là các hàm thuần túy lấy trạng thái trước đó và một hành động, và trả về trạng thái tiếp theo. Hãy nhớ trả về các đối tượng trạng thái mới, thay vì làm biến đổi trạng thái trước đó. Bạn có thể bắt đầu với một bộ giảm tốc duy nhất và khi ứng dụng của bạn phát triển, hãy tách nó thành các bộ giảm nhỏ hơn để quản lý các phần cụ thể của cây trạng thái. Vì các bộ giảm tốc chỉ là các chức năng, bạn có thể kiểm soát thứ tự chúng được gọi, truyền dữ liệu bổ sung hoặc thậm chí tạo các bộ giảm tốc có thể sử dụng lại cho các tác vụ phổ biến như phân trang.

function visibilityFilter(state = 'SHOW_ALL', action) {
  switch (action.type) {
    case 'SET_VISIBILITY_FILTER':
      return action.filter
    default:
      return state
  }
}

function todos(state = [], action) {
  switch (action.type) {
    case 'ADD_TODO':
      return [
        ...state,
        {
          text: action.text,
          completed: false
        }
      ]
    case 'COMPLETE_TODO':
      return state.map((todo, index) => {
        if (index === action.index) {
          return Object.assign({}, todo, {
            completed: true
          })
        }
        return todo
      })
    default:
      return state
  }
}

import { combineReducers, createStore } from 'redux'
let reducer = combineReducers({ visibilityFilter, todos })
let store = createStore(reducer)

để biết thêm thông tin truy cập tại đây

Redux yêu cầu kỷ luật liên quan đến bất biến. Một cái gì đó tôi có thể đề nghị là ng-freeze để cho bạn biết về bất kỳ đột biến trạng thái ngẫu nhiên nào.

Theo tôi biết, redux được lấy cảm hứng từ thông lượng. thông lượng là một kiến ​​trúc như MVC (mô hình trình điều khiển xem). facebook giới thiệu thông lượng do vấn đề về khả năng mở rộng khi sử dụng MVC. Vì vậy, thông lượng không phải là một thực hiện, nó chỉ là một khái niệm. Trên thực tế redux là việc thực hiện thông lượng.