Javascript 向我解释一下使用Redux的Next.js应用程序（canary）示例中代码的用途

遵循

我正在尝试使用Redux在Next.js上创建我自己的应用程序

但是我无法理解以下代码在store.js文件中的用途。
第一个是：`

const bindMiddleware = (middleware) => {
  if (process.env.NODE_ENV !== 'production') {
    const { composeWithDevTools } = require('redux-devtools-extension')
    return composeWithDevTools(applyMiddleware(...middleware))
  }
 return applyMiddleware(...middleware)
}

第二个是：

 const reducer = (state, action) => {
    if (action.type === HYDRATE) {
        const nextState = {
          ...state, // use previous state
          ...action.payload, // apply delta from hydration
        }
        if (state.count) nextState.count = state.count // preserve count value on client side navigation
        return nextState}
     else {
        return combinedReducer(state, action)
      }

}

在第一种情况下，如果我们可以制作

applyMiddleware（thunkMiddleware）

，为什么我们应该绑定中间件 在第二种情况下据我所知，如果（state.count）是指从“/count/reducer”导入计数

---

所以我的问题是，如果f.e我有一个reducer，它有用户信息

if（state.userReducer）

和

import userReducer from./user/userReducer'

要回答第一个问题，你可能会注意到检查它是否是

'production'

模式的语法。如果是生产模式，则正常工作，但如果不是生产模式，则包括devtools。他们编写这个绑定函数是为了在这两种不同的情况下以不同的方式工作，而不必手动执行

对于第二个问题，他们正在（state.count）进行防御性编码。如果他们试图改变一个州的一部分，但它实际上并不存在，它就会遇到一些麻烦。因此，在编辑它之前，让我们检查它是否确实存在