How to access DVA Store in UMI application? - redux

Question

Hi most of the react developers would find dvaJS and umiJS, heaven for state management and application development. Dva is elm based state management tool that use react-redux for state management.
Q: How to access DVA Store in UMI application, outside the component or without connect?
Q: How to dispatch DVA Store in UMI application, outside the component or without connect?

Answer 1

Q: How to access DVA Store in UMI application, outside the component or without connect?
A: https://v2.umijs.org/guide/with-dva.html#how-to-access-store-or-dispatch
It says use:
window.g_app._store
Q: How to dispatch DVA Store in UMI application, outside the component or without connect?
A: https://v2.umijs.org/guide/with-dva.html#how-to-access-store-or-dispatch
It says use:
window.g_app._store.dispatch('namespace/action')
Bonus:
Q: How to get state of DVA Store in UMI application, outside the component or without connect?
A: https://v2.umijs.org/guide/with-dva.html#how-to-access-store-or-dispatch
It says use:
window.g_app._store.getState()
Available Functions:
asyncReducers: {}
dispatch: ƒ ()
getState: ƒ f()
replaceReducer: ƒ (n)
runSaga: ƒ ()
subscribe: ƒ subscribe(listener)
Recommended: Instead of directly using it, write a Util that exports these functions.

Answer 2

To access or dispatch DVA store in UMI app, you can use DVA hooks in functional components without connect. It can be only used with DVA v2.6.x.
In a functional component:
Access store:
const state = useSelector(state => state)
// If state in DVA store changed, rendered values in "state" can be changed in page too.
or
const store = useStore()
const state = store.getState()
// If state in DVA store changed, rendered values in "state" won't be changed in page.
Dispatch:
const dispatch = useDispatch()
dispatch({type: "namespace/action", payload: 12345})

Answer 3

As and extra reference and for those searching for accessing the dva app reference outside of a react component context while using:
Umi.js v3+
Along with dva 2.6+ (as per the framework compatibility)
You can use the getDvaApp exported method:
import { getDvaApp } from 'umi';
const dispatch = getDvaApp()._store.dispatch;
// use the `dispatch`