使用中间件将 redux-devtools 传递到 redux store
Passing in redux-devtools to a redux store with middleware
根据 redux-devtools 文档中的编写方式,this code 是如何处理的?
https://github.com/auth0-blog/redux-auth/blob/master/index.js#L10-L12
let createStoreWithMiddleware = applyMiddleware(thunkMiddleware, api)(createStore)
let store = createStoreWithMiddleware(quotesApp)
我不确定如何重写它以包括 DevTools 但我确实找到了 this GitHub link 包括一个包含 DevTools 的拉取请求,我已经得到了在职的。但是,我仍然不明白它是如何应用的以及 let something = function(param1,param2)(function)
发生了什么。我知道使用该语法,applyMiddleware
的 return 值被发送到 createStore
,但是 createStore
语法需要一个 reducer、initialState 和一个 enhancer。这是如何应用在这里的?
import { createDevTools } from 'redux-devtools'
import LogMonitor from 'redux-devtools-log-monitor'
import DockMonitor from 'redux-devtools-dock-monitor'
const DevTools = createDevTools(
<DockMonitor toggleVisibilityKey="ctrl-h" changePositionKey="ctrl-q">
<LogMonitor theme="tomorrow" preserveScrollTop={false} />
</DockMonitor>
)
let createStoreWithMiddleware = applyMiddleware(thunkMiddleware, api)(createStore)
let store = createStoreWithMiddleware(quotesApp, DevTools.instrument())
与 redux-devtools documentation 中的以下语法相反,该语法使我感到困惑。
initialState 发生了什么?在 the example 中没有任何地方提到 initialState
。
store enhancer 定义签名大致如下所示(从 `applyMiddleware 的定义中截取):
export default function applyMiddleware(...middlewares) {
return (createStore) => (reducer, preloadedState, enhancer) => {
// snip actual enhancer logic
return {
...store,
dispatch
}
}
}
因此,增强器定义实际上 returns 一个引用 createStore
函数本身的函数。
不幸的是,不知何故人们似乎从某处复制了那种非常面向功能的调用模式,这真的很难理解。不确定它是否在文档的早期版本中,或者是什么。请注意,特定的使用模式不允许定义 initialState
(或者,因为它即将重命名,preloadedState
)。
所以是的,当前的定义模式,我认为 much 更具可读性的是:
const middlewares = [thunk, myMiddleware];
const middlewareEnhancer = applyMiddleware(...middlewares);
const enhancers = compose(middlewareEnhancer, someOtherEnhancer);
const store = createStore(reducer, preloadedState, enhancers);
根据 redux-devtools 文档中的编写方式,this code 是如何处理的?
https://github.com/auth0-blog/redux-auth/blob/master/index.js#L10-L12
let createStoreWithMiddleware = applyMiddleware(thunkMiddleware, api)(createStore)
let store = createStoreWithMiddleware(quotesApp)
我不确定如何重写它以包括 DevTools 但我确实找到了 this GitHub link 包括一个包含 DevTools 的拉取请求,我已经得到了在职的。但是,我仍然不明白它是如何应用的以及 let something = function(param1,param2)(function)
发生了什么。我知道使用该语法,applyMiddleware
的 return 值被发送到 createStore
,但是 createStore
语法需要一个 reducer、initialState 和一个 enhancer。这是如何应用在这里的?
import { createDevTools } from 'redux-devtools'
import LogMonitor from 'redux-devtools-log-monitor'
import DockMonitor from 'redux-devtools-dock-monitor'
const DevTools = createDevTools(
<DockMonitor toggleVisibilityKey="ctrl-h" changePositionKey="ctrl-q">
<LogMonitor theme="tomorrow" preserveScrollTop={false} />
</DockMonitor>
)
let createStoreWithMiddleware = applyMiddleware(thunkMiddleware, api)(createStore)
let store = createStoreWithMiddleware(quotesApp, DevTools.instrument())
与 redux-devtools documentation 中的以下语法相反,该语法使我感到困惑。
initialState 发生了什么?在 the example 中没有任何地方提到 initialState
。
store enhancer 定义签名大致如下所示(从 `applyMiddleware 的定义中截取):
export default function applyMiddleware(...middlewares) {
return (createStore) => (reducer, preloadedState, enhancer) => {
// snip actual enhancer logic
return {
...store,
dispatch
}
}
}
因此,增强器定义实际上 returns 一个引用 createStore
函数本身的函数。
不幸的是,不知何故人们似乎从某处复制了那种非常面向功能的调用模式,这真的很难理解。不确定它是否在文档的早期版本中,或者是什么。请注意,特定的使用模式不允许定义 initialState
(或者,因为它即将重命名,preloadedState
)。
所以是的,当前的定义模式,我认为 much 更具可读性的是:
const middlewares = [thunk, myMiddleware];
const middlewareEnhancer = applyMiddleware(...middlewares);
const enhancers = compose(middlewareEnhancer, someOtherEnhancer);
const store = createStore(reducer, preloadedState, enhancers);