路由跳转方式
UI component主要是利用history属性。在effects中进行路由跳转,主要利用 react-router-redux这个库。
方式一
如果组件是直接在router中定义的组件,组件本身传入的props,就有history对象了,直接使用即可。
直接取出history 打印props方式二
如果组件为子组件,或者是邻居组件等,一层一层传入history比较麻烦,所以,可以利用 withRouter进行跳转。
withRouter属性方式三
在页面直接利用 Link标签进行跳转。
Link方式四
通过react审查元素,可以看到context中有history对象,所以,可以利用context上下文,取出router中的内容,就有history对象了。 react审查元素实现:
关于如何取出组件context,可以参考:
https://www.jianshu.com/writer#/notebooks/21173890/notes/31316205/preview
方式五
dva中,有使用 react-router-redux 这个库,所以,可以利用该库的push方法,在effects中进行路由跳转。
实现:
// import { delay } from 'redux-saga';
import { delay } from 'dva/saga';
import key from 'keymaster';
import { routerRedux } from 'dva/router';
export default {
namespace: 'counter',
state: {
count: 0,
record: 0,
},
reducers: {
'add'(state, { type, payload }) {
const newCount = state.count + 1;
const r = state.record > newCount ? state.record : newCount;
return {
...state,
count: newCount,
record: r
}
},
},
effects: {
*asayAdd(action, { put, call, select }) {
console.log(routerRedux);
yield call(delay, 1000);
yield put({ type: 'add' }); // 同一个model不用加namespace
yield put(routerRedux.push('/'));
}
},
subscriptions: {
keyboardWatcher({ dispatch }) {
key('⌘+up, ctrl+up', () => { dispatch({ type: 'add' }) });
},
},
}
图示,简单没有带参数方式
打印routerRedux值: 打印routerRedux值
上面routerRedux.push是没有带参数的,如果带参数的话,如下所示:
// import { delay } from 'redux-saga';
import { delay } from 'dva/saga';
import key from 'keymaster';
import { routerRedux } from 'dva/router';
import queryString from 'query-string';
export default {
namespace: 'counter',
state: {
count: 0,
record: 0,
},
reducers: {
'add'(state, { type, payload }) {
const newCount = state.count + 1;
const r = state.record > newCount ? state.record : newCount;
return {
...state,
count: newCount,
record: r
}
},
},
effects: {
*asayAdd(action, { put, call, select }) {
console.log(routerRedux);
yield call(delay, 1000);
yield put({ type: 'add' }); // 同一个model不用加namespace
yield put(routerRedux.push({
pathname: '/',
search: queryString.stringify({
name: 'xiaoming',
age: 11
})
}));
}
},
subscriptions: {
keyboardWatcher({ dispatch }) {
key('⌘+up, ctrl+up', () => { dispatch({ type: 'add' }) });
},
},
}
说明:
对于参数的处理,使用query-string这个库。
扩展:
在react中,withRouter是从react-router-dom库传入的。但在dva中,dva进行了封装,可以从dva/router中传入的,但是,从react-router-dom也是没有问题的。
有connect和withRouter的情况,export组件的书写方式
如上图方式二中的图片所示。
网友评论