次のコードのReact以外のプロジェクトがあります
。
_index.js_
import configureStore from 'js/store/configureStore'
/* Redux Imports */
import { createPage } from 'js/actions/page'
// Boot the App
document.addEventListener('DOMContentLoaded', function () {
const initialState = window.__INITIAL_STATE__
const pageId = window.__INITIAL_STATE__.page
const store = configureStore(initialState)
store.dispatch(createPage(pageId))
})
*actions/page.js*
function initPage (pageId) {
return {
type: 'CREATE_PAGE',
page: pageId
}
}
export function createPage (pageId) {
return dispatch => {
dispatch(initPage(pageId))
}
}
_reducers / page.js_
/**
* Page Mediators get imported here
* Page Mediators are brokers that hold page initialization.
* The bundle includes all page mediators but they will not be activated
* unless thre reducer calls them.
*/
import * as cart from 'js/templates/cart'
/**
* This is a edge case, index.js boots the app and we are subscribing to
* a Redux @<strong i="11">@INIT</strong> action instead of adding one more layer of actions
* which leads to unintended scenarios.
*/
const page = (state = {page: []} , action) => {
console.log(state)
switch (action.type) {
case '@<strong i="12">@INIT</strong>':
console.log('initializing page:' + state.id)
console.log(state)
dispatch({type: 'CREATE_PAGE',page: state.id})
cart.init()
return state
case 'CREATE_PAGE':
console.log('initializing page:' + state.id)
cart.init()
return state
default:
return state
}
}
export default page
私が抱えている問題は、 actions/page.js
がCREATE_PAGE
アクションを認識しないことです。 何か考えはありますか?
無関係ですが
- これはエッジケースであり、index.jsがアプリを起動し、サブスクライブしています
- アクションのレイヤーをもう1つ追加する代わりに、Redux @@ INITアクション
- これは意図しないシナリオにつながります。
いつでもアプリを壊す可能性があります。
私たちは具体的に言う:
- これらは、Reduxによって予約されているプライベートアクションタイプです。
- 不明なアクションについては、現在の状態を返す必要があります。
- 現在の状態が未定義の場合は、初期状態を返す必要があります。
- これらのアクションタイプをコードで直接参照しないでください。
ありがとう@ gaearon-これを削除するつもりです。作成したアクションが表示されないため、追加しました-何が間違っている可能性がありますか?
質問にはStackOverflowを使用してください。 バグと機能のディスカッションには課題追跡システムを使用しようとしますが、サポートには使用しません。
コードに関しては、副作用( cart.init()
)を実行し、レデューサー内でアクション( dispatch()
)をディスパッチしようとすることで、Reduxの制約に違反しています。 ドキュメントに複数回記載されているように、これは許可されていません。 レデューサーは純粋関数である必要があるため、アクションをディスパッチする前または後に副作用を配置する必要があります。
レデューサー内でディスパッチすると、コードは失敗するはずです。 失敗しない場合は、どこかにエラーを飲み込んでいるという約束があるかもしれません。 このコードスニペットからこれ以上言うのは難しいです。
最も参考になるコメント
無関係ですが
いつでもアプリを壊す可能性があります。
私たちは具体的に言う: