Tôi có các bài kiểm tra đơn vị cho của tôi reducers. Tuy nhiên, khi gỡ lỗi trong trình duyệt, tôi muốn kiểm tra xem các hành động của mình đã được gọi đúng chưa và trạng thái đã được sửa đổi cho phù hợp chưa.

Tôi đang tìm kiếm một cái gì đó như:

window._redux.store

... trong trình duyệt để tôi có thể nhập nội dung đó trên bảng điều khiển và kiểm tra mọi thứ đang diễn ra như thế nào.

Làm thế nào tôi có thể đạt được điều đó?

Cách xem cửa hàng redux trên bất kỳ trang web nào, không thay đổi mã

Cập nhật tháng 11 năm 2019

Các devtools phản ứng đã thay đổi kể từ câu trả lời ban đầu của tôi. componentsTab mới trong devtools của chrome vẫn có dữ liệu, nhưng bạn có thể phải tìm kiếm thêm một chút.

1. mở chrome devTools
2. chọn Componentstab của react devtool
3. nhấp vào nút trên cùng và nhìn vào cột bên storephải để được hiển thị
4. lặp lại bước 3 xuống cây cho đến khi bạn tìm thấy store(đối với tôi đó là cấp độ 4)
5. Bây giờ bạn có thể làm theo các bước bên dưới với $r.store.getState()

Câu trả lời gốc

Nếu bạn có các công cụ phát triển phản ứng đang chạy, bạn có thể sử dụng $r.store.getState();mà không có thay đổi nào đối với cơ sở mã của mình .

Lưu ý: Trước tiên, bạn phải mở react devtool trong cửa sổ công cụ dành cho nhà phát triển của mình để nó hoạt động, nếu không bạn sẽ gặp $r is not definedlỗi

1. mở các công cụ dành cho nhà phát triển
2. nhấp vào tab React
3. đảm bảo nút nhà cung cấp (hoặc nút trên cùng) được chọn
4. sau đó nhập $r.store.getState();hoặc $r.store.dispatch({type:"MY_ACTION"})vào bảng điều khiển của bạn

let store = createStore(yourApp); window.store = store;

Bây giờ bạn có thể truy cập cửa hàng từ window.store trong bảng điều khiển như sau:

window.store.dispatch({type:"MY_ACTION"})

Bạn có thể sử dụng phần mềm trung gian ghi nhật ký như được mô tả trong Sách Đỏ :

/**
 * Logs all actions and states after they are dispatched.
 */
const logger = store => next => action => {
  console.group(action.type)
  console.info('dispatching', action)
  let result = next(action)
  console.log('next state', store.getState())
  console.groupEnd(action.type)
  return result
}

let createStoreWithMiddleware = applyMiddleware(logger)(createStore)

let yourApp = combineReducers(reducers)
let store = createStoreWithMiddleware(yourApp)

Ngoài ra, bạn có thể thay đổi việc ghi nhật ký để chỉ thêm vào một mảng toàn cục (của bạn window._redux) và bạn có thể xem trong mảng khi bạn cần thông tin về một trạng thái cụ thể.

Nếu bạn đang sử dụng Next JS , bạn có thể truy cập cửa hàng bằng cách: window.__NEXT_REDUX_STORE__.getState()

Bạn cũng có thể gửi các hành động, chỉ cần xem các tùy chọn bạn có trongwindow.__NEXT_REDUX_STORE__

Giải pháp được đề xuất không phù hợp với tôi.

Lệnh đúng là:

$r.props.store.getState()

Trong trường hợp bạn muốn xem trạng thái cửa hàng để gỡ lỗi, bạn có thể làm như sau:

#import global from 'window-or-global'
const store = createStore(reducer)
const onStateChange = (function (global) {
  global._state = this.getState()
}.bind(store, global))
store.subscribe(onStateChange)
onStateChange()
console.info('Application state is available via global _state object.', '_state=', global._state)

Một câu trả lời khác đề xuất thêm cửa hàng vào cửa sổ, nhưng nếu bạn chỉ muốn truy cập cửa hàng dưới dạng một đối tượng, bạn có thể xác định một getter trên cửa sổ.

Mã này cần được thêm vào nơi bạn đã định cấu hình cửa hàng của mình - trong ứng dụng của tôi, đây là tệp giống như nơi <Provider store={store} />được gọi.

Bây giờ bạn có thể gõ reduxStorevào bảng điều khiển để lấy một đối tượng - và copy(reduxStore)sao chép nó vào khay nhớ tạm.

  Object.defineProperty(window, 'reduxStore', {
    get() {
      return store.getState();
    },
  });

Bạn có thể bọc nó trong một if (process.env.NODE_ENV === 'development')để tắt nó trong sản xuất.

Với các công cụ của nhà phát triển phản ứng:

const store = [...__REACT_DEVTOOLS_GLOBAL_HOOK__.reactDevtoolsAgent.internalInstancesById.values()].find(e=>e.elementType.name==="Provider").pendingProps.store

Trước hết, bạn cần xác định cửa hàng trong windowđối tượng (Bạn có thể đặt nó trong configureStoretệp của mình):

window.store = store;

Sau đó, bạn chỉ cần viết trong bảng điều khiển như sau:

window.store.getState();

Hy vọng điều này sẽ giúp.