在调试时,我可以从浏览器控制台访问Redux存储吗？

Question

我有我的单元测试reducers,正如我所说的那样.但是,当我在浏览器中进行调试时,我想检查是否已正确调用我的操作以及是否已相应地修改状态.

我正在寻找类似的东西:

window._redux.store

...在浏览器中,我可以在控制台上键入它并检查事情的进展情况.

我怎样才能做到这一点？

Answer 1

如果您已经运行了反应开发人员工具,则可以使用components而无需更改代码库.

注意:您必须首先在开发人员工具窗口中打开react devtool以使其工作,否则您将收到Components错误

1. 打开开发者工具
2. 单击"React"选项卡
3. 确保选择了提供者节点(或最顶层节点)
4. 然后键入store或store进入您的控制台

Answer 2

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

现在您可以从控制台中的window.store访问商店,如下所示:

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

Answer 3

您可以使用Redux Book中描述的日志记录中间件:

/**
 * 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)

或者,您可以将日志记录更改为仅附加到全局数组(您的window._redux),并在需要有关特定状态的信息时查看数组.

Answer 4

推荐的解决方案对我不起作用。

正确的命令是：

$r.props.store.getState()

Answer 5

另一个答案建议将商店添加到窗口中，但如果您只想将商店作为对象访问，则可以在窗口上定义一个 getter。

需要在您配置商店的位置添加此代码 - 在我的应用程序中，这与<Provider store={store} />调用的文件相同。

现在，您可以reduxStore在控制台中键入以获取对象 - 并将copy(reduxStore)其复制到剪贴板。

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

您可以将其包装在 an 中if (process.env.NODE_ENV === 'development')以在生产中禁用它。

Answer 6

如果您使用Next JS，您可以通过以下方式访问商店：window.__NEXT_REDUX_STORE__.getState()

您也可以调度操作，只需查看您拥有的选项window.__NEXT_REDUX_STORE__