Làm thế nào để cập nhật trạng thái Redux tiếp tục xuống cây

Question

Đối với một giảm nhất định, cây trạng Redux tôi thường trông giống như sau:

{ 
    someField: 'some value', 
    // ... more fields 
    metadata: { 
    pending: false, 
    fetched: true, 
    } 
} 

Thông thường, khi tôi làm một yêu cầu async, tôi bắn một hành động SOME_ACTION_REQUEST, mà đặt thuộc tính metadata.pending thành true. Nó được đặt lại thành false một lần nữa khi sự kiện phù hợp SOME_ACTION_RESPONSE hoặc SOME_ACTION_ERROR sau này.

Tuy nhiên, cách tôi cập nhật trạng thái này là một chút dài dòng:

case actions.SOME_ACTION_REQUEST: { 
    return { 
    ...state, 
    metadata: { ...state.metadata, pending: true }, 
    }; 
} 

Có một cách đơn giản hơn để làm điều này?

Object.assign({}, state, { metadata: { pending: true } }) cũng không dễ đọc được.

Answer 1

Bạn có thể sử dụng cấu trúc lồng nhau của bộ giảm tốc.

nơi có chức năng đặt tên/giảm tốc siêu dữ liệu, hãy gọi điều này để thay đổi các trường.

Ví dụ mã

const metadata = (state = [], action = {}) => { 
    switch (action.type) { 
     case actions.SOME_ACTION_REQUEST:: 
      return {...state, ...action.payload.metadata}; 

     default: 
      return state; 
    } 
}; 
const someReducer = (state = initalState, action = {}) => { 
    let metadata = {}; 
    switch (action.type) { 
     case actions.SOME_ACTION_REQUEST: { 
      metadata = metadata(state.metadata, action) 
      return { 
       ...state, 
       ...metadata 
       }; 
      } 
    } 
}; 

Answer 2

Đó là ví dụ điển hình về cập nhật dữ liệu không thay đổi. Bạn có thể muốn đọc qua phần Structuring Reducers mới của tài liệu Redux để biết thêm thông tin, đặc biệt là các trang Prerequisite Concepts và Immutable Update Patterns.

Answer 3

Vâng, nó thực sự là một nhược điểm của Redux, và không chỉ - nếu bạn sử dụng MobX, bạn sẽ có cùng một vấn đề. Vì vậy, câu trả lời chỉ là để khái quát hóa nó bằng cách nào đó - viết một nhà máy giảm tốc, mà sẽ nhận được hằng số như đối số, và hợp nhất chúng một lần, và tái sử dụng nó cho tất cả các hành động không đồng bộ.

I've created a library cho chính xác vấn đề này, vì vậy vui lòng xem xét vấn đề này. Ngoài ra, chỉ cần nhớ rằng Redux thô là khá tốt, và cố gắng nắm bắt mô hình miền của bạn một cách tốt nhất. dụ của bạn sẽ trông như thế:

import { createTile } from 'redux-tiles'; 

const someTile = createTile({ 
    type: ['some', 'example'], 
    fn: ({ api, params }) => api.get('/some/request', params), 
}); 

dispatch(actions.some.example(params)); 
selectors.some.example(state)); // { isPending: true, error: null, data: null } 

dữ liệu từ bộ chọn cuối cùng sẽ được cập nhật tự động sau khi phản ứng sẽ được nhận - vì vậy không cần phải viết những thứ như vậy bằng tay.

Một vấn đề khác là cập nhật lồng nhau và bạn phải làm điều tương tự, nhưng với số lượng lớn hơn về độ dài, mà tôi luôn cố gắng giải quyết. Nhưng, tất nhiên, nó là một thư viện khá đơn giản, mà chỉ cố gắng để trang trải các trường hợp sử dụng đơn giản - cho những người phức tạp, tôi chắc chắn khuyên bạn nên thử một cái gì đó tùy chỉnh phù hợp.