externals: {
'react': 'React',
'react-dom': 'ReactDOM',
'react-router-dom': 'ReactRouterDOM',
'redux': 'Redux',
'react-redux': 'ReactRedux',
'react-router-redux': 'ReactRouterRedux',
'redux-saga': 'ReduxSaga'
}
import { react, redux, reactRedux, reactRouterDom } from 'mido-react';
import Mido from 'mido-react';
import App from './App';
const mido = Mido();
mido.model({
namespace: 'home',
state: {
number: 1
},
reducers: {
add(state, action) {
return {
number: state.number + 1
}
},
reduce(state, action) {
return {
number: state.number - 1
}
}
},
effects: {
asyncAdd: [
function *({ data: {number} }, { call, put }) {
yield put({
type: 'add'
})
},
{
type: 'throttle',
ms: 3000
}
],
*asyncReduce({ }, { call, put }) {
yield put({
type: 'reduce'
})
}
}
})
mido.router(() => <App />);
mido.run(document.getElementById('app'));
import Mido from 'mido-react';
import App from './App';
const mido = Mido();
mido.model([
{
namespace: 'home',
state: {
number: 1
},
reducers: {
add(state, action) {
return {
number: state.number + 1
}
},
reduce(state, action) {
return {
number: state.number - 1
}
}
}
},
{
namespace: 'home2',
state: {
number: 1
},
reducers: {
add2(state, action) {
return {
number: state.number + 2
}
},
reduce2(state, action) {
return {
number: state.number - 2
}
}
},
effects: {
*asyncAdd2({ }, { call, put }) {
yield put({
type: 'add2'
})
},
*asyncReduce2({ }, { call, put }) {
yield put({
type: 'reduce2'
})
}
},
subscriptions: {
setup({ dispatch, history }) {
return history.listen(({ pathname }) => {
if (pathname === '/home2') {
dispatch({ type: 'init' });
}
});
}
}
}
])
mido.router(() => <App />);
mido.run(document.getElementById('app'));
import React from 'react';
import { midoRedux } from 'mido-react';
const {
connect
} = midoRedux;
@connect(state => ({ number: state.home.number }))
class Home extends React.Component {
render() {
return (
<div>
home
数字
{this.props.number}
<div onClick={() => { this.props.history.push('/home2') }}>点我跳转</div>
<div onClick={() => { this.props.dispatch({ type: 'add', data:{number: 1} }) }}>点我+1</div>
<div onClick={() => { this.props.dispatch({ type: 'reduce' }) }}>点我-1</div>
</div>
)
}
}
export default Home;
export default [
{
path: '/',
exact: true,
component: require('../page/home1').default
},
{
path: '/home2',
component: require('../page/home2').default
}
]
import Mido, { reactRouterDom } from 'mido-react';
import App from './App';
const {
BrowserRouter,
Route
} = reactRouterDom;
***省略部分***
mido.router(() =>
<BrowserRouter>
<Route path="/" component={App} />
</BrowserRouter>
)
react-router-dom