dva

import dva, { connect } from 'dva'; import React from 'react'; import ReactDOM from 'react-dom'; import { Router, Route, Switch } from 'dva/router'; // 1. Initialize const app = dva(); // 2. Model app.model({ namespace: 'count', state: { current: 0 }, reducers: { add(state) { return { current: state.current + 1 }; }, minus(state) { return { current: state.current - 1 }; }, }, effects: { *addAsync(action, { call, put }) { yield call(() => new Promise(resolve => setTimeout(resolve, 1000))); yield put({ type: 'add' }); }, }, subscriptions: { setup({ dispatch, history }) { history.listen(({ pathname }) => { if (pathname === '/count') { console.log('Entered count page'); dispatch({ type: 'add' }); // Initial increment when entering } }); }, }, }); // 3. View function CountPage({ count, dispatch }) { return ( <div> <h2>Count: {count.current}</h2> <button onClick={() => dispatch({ type: 'add' })}>+</button> <button onClick={() => dispatch({ type: 'minus' })}>-</button> <button onClick={() => dispatch({ type: 'addAsync' })}>Add Async</button> </div> ); } const ConnectedCountPage = connect(({ count }) => ({ count }))(CountPage); // 4. Router app.router(({ history }) => ( <Router history={history}> <Switch> <Route path="/" exact component={() => <div>Home Page <br/><a href="/count">Go to Count</a></div>} /> <Route path="/count" component={ConnectedCountPage} /> </Switch> </Router> )); // 5. Start // Ensure you have a div with id="root" in your HTML app.start('#root');