Separate data and view (including router and react)

[sorrycc]

So we can use dva with 微信小程序、支付宝小程序 and other architectures, and we can choose other router implement.

• 怎样在dva中用react-router 4？ #529
• Ok, you asked, you got it! #510
• dva能不能不依赖react，这样就可以和小程序结合。 #354
• dva能否兼容react-native-router-flux做路由 #310
• remove react-router #195

[plandem]

no estimates?

[hbrls]

As you said, dva is a framework not a library. I'd like to see it focusing on an opinionated practice.

For @plandem, if it worths to replace react-router with redux-router or else, I'd be happy to that improvement. But if it's to support both and more, the effort and concept behind is not attractive.

[sorrycc]

It's just do some abstraction, e.g. a library called dva-model. And the export of dva will not change, and will try to not affect the existing use of dva users.

[nihgwu]

I'm using dva in React Native and NavigationExperimantal as the router component, the only concern for me is to detach irrelevant dependencies such as react-dom and react-router.

[plandem]

@hbrls yep, but there must be core concept of routing in terms of dva. E.g. at https://github.com/plandem/rrrouter I exposed next required props for any provider implementation:

	route: PropTypes.shape({ ...locationPropTypes }).isRequired,
	go: PropTypes.func.isRequired,
	back: PropTypes.func.isRequired,
	forward: PropTypes.func.isRequired,
	navigate: PropTypes.func.isRequired,

so it's up to user how he is going to implement it (e.g. at HOC). But! I know nothing about dva's routing requirements. Especially it must work via redux, so we need some kind of middleware. E.g. at: https://github.com/plandem/rrrouter-provider-redux I created one. But as I said - I need to know some specification of dva routing abstraction to integrate it at dva.

[plandem]

ok, it tried to play a little with DVA (btw, sources quite hard to read. E.g.: https://github.com/d-band/fef (fork of dva) is much easier and cleaner to read).

Here are steps to make it work with my router (https://github.com/plandem/rrrouter):

import React from 'react';
import createDva from 'dva/lib/createDva';

import { createMiddleware, HashHistory, reducer as routing } from 'rrrouter-provider-redux';

export default createDva({
	mobile: false,
	initialReducer: {
		routing,
	},
	defaultHistory: new HashHistory(),
	routerMiddleware: (history) => createMiddleware(history),
	setupHistory(history) {

	},
});

and init app like this:

import './index.html';
import React from 'react';
import dva from './utils/dva';
import Router from 'rrrouter';
import { Provider } from 'rrrouter-provider-redux';

const app = dva();

const IndexPage = (props) => <div>index page</div>;
const NotFound = (props) => <div>Not Found</div>;

// 2. Model
app.model(require('./models/app'));

// 3. Router
app.router((props) =>(
	<Provider stateKey='routing' initHref='/'>
		<Router>
			<Router.Match path='/' handler={IndexPage}/>
			<Router.Miss handler={NotFound}/>
		</Router>
	</Provider>
));

// 4. Start
app.start('#root');

If remove dependency of React-Router and do some code cleanup, then I would be quite happy with current implementation.

[sorrycc]

Done in dva@2.