使用CDN时如何调用react logger函数
How to call react logger function when using CDN
我正在创建文件来学习自己的反应。
为了简化我使用 cdn 的事情,直到现在一切都变得流畅。
我不知道如何为我的 Redux.applymiddleware fn.
提供 redux-logger 中间件
我应该用什么替换这里的 /* logger */ 字符串?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>React step by step</title>
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/redux@4.0.1/dist/redux.js" crossorigin></script>
<script src="https://unpkg.com/redux-thunk@2.1.0/dist/redux-thunk.js" crossorigin></script>
<script src="https://unpkg.com/redux-logger@3.0.6/dist/redux-logger.js" crossorigin></script>
<script type="text/javascript" src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
</head>
<body>
<div>Open your Dev tool! (F12)</div>
</body>
<script type="text/babel" >
const reducer = (state = {}, action) => {
return state;
}
//const myMiddleware = Redux.applyMiddleware( /* logger here */)
const store = Redux.createStore( reducer/*, myMiddleware*/ );
store.dispatch({ type: 'FOO'});
const currentState = store.getState();
console.log(currentState)
</script>
</html>
如果您检查 redux-logger
的 UMD bundler config, which is in their GitHub repo: https://github.com/LogRocket/redux-logger/blob/master/rollup.config.js#L33 - 您会看到他们将 UMD 包的模块命名为 reduxLogger
。所以你应该按如下方式访问它:
const logger = window.reduxLogger.logger
我正在创建文件来学习自己的反应。 为了简化我使用 cdn 的事情,直到现在一切都变得流畅。 我不知道如何为我的 Redux.applymiddleware fn.
提供 redux-logger 中间件我应该用什么替换这里的 /* logger */ 字符串?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>React step by step</title>
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/redux@4.0.1/dist/redux.js" crossorigin></script>
<script src="https://unpkg.com/redux-thunk@2.1.0/dist/redux-thunk.js" crossorigin></script>
<script src="https://unpkg.com/redux-logger@3.0.6/dist/redux-logger.js" crossorigin></script>
<script type="text/javascript" src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
</head>
<body>
<div>Open your Dev tool! (F12)</div>
</body>
<script type="text/babel" >
const reducer = (state = {}, action) => {
return state;
}
//const myMiddleware = Redux.applyMiddleware( /* logger here */)
const store = Redux.createStore( reducer/*, myMiddleware*/ );
store.dispatch({ type: 'FOO'});
const currentState = store.getState();
console.log(currentState)
</script>
</html>
如果您检查 redux-logger
的 UMD bundler config, which is in their GitHub repo: https://github.com/LogRocket/redux-logger/blob/master/rollup.config.js#L33 - 您会看到他们将 UMD 包的模块命名为 reduxLogger
。所以你应该按如下方式访问它:
const logger = window.reduxLogger.logger