https://github.com/srect/dvajs_todolist
dvajs todolist
https://github.com/srect/dvajs_todolist
Last synced: 12 months ago
JSON representation
dvajs todolist
- Host: GitHub
- URL: https://github.com/srect/dvajs_todolist
- Owner: sRect
- Created: 2021-04-15T12:06:23.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2021-04-16T09:57:27.000Z (over 5 years ago)
- Last Synced: 2025-06-15T03:12:09.619Z (about 1 year ago)
- Language: JavaScript
- Size: 228 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## dvajs
### 1. 项目结构
```
├── node_modules
├── package.json
├── public
| ├── favicon.ico
| ├── index.html
| ├── logo192.png
| ├── logo512.png
| ├── manifest.json
| └── robots.txt
├── README.md
├── src
| ├── components
| | ├── Addtodo.js
| | └── TodoListItem.js
| ├── index.js
| ├── models
| | ├── count.js
| | └── todos.js
| ├── router.js
| └── routes
| ├── Count.js
| └── Todos.js
└── yarn.lock
```
### 2. 入口`index.js`
```javascript
import dva from "dva";
import router from "./router";
const allModel = require.context('./models', true, /\.js$/);
// 1.init
const app = dva();
// 2.定义Model
// app.model(require("./models/todos").default);
allModel.keys().forEach((key) => {
// console.log("allModel(key).default", allModel(key).default);
app.model(allModel(key).default);
});
// 3.Router
app.router(router);
// 4.Start
app.start("#root");
```
### 3. 路由`router.js`
```javascript
import { Route, Router, Switch, Link } from "dva/router";
import Todos from "./routes/Todos";
import Count from './routes/Count';
function RouterConfig({ history }) {
return (
<>
home | count
>
);
}
export default RouterConfig;
```
### 4. `models > count`模型
```javascript
const delay = (time) => {
return new Promise((resolve) => {
setTimeout(() => resolve(), time);
});
};
const countStore = {
namespace: "count",
state: {
count: 1,
},
reducers: {
add(state, { payload }) {
return { count: state.count + (payload?.num || 1) };
},
minus(state) {
return { count: state.count - 1 };
},
},
effects: {
// 异步添加
*asyncAdd({ payload }, effect) {
const { call, put } = effect;
yield call(delay, 1000);
yield put({ type: "add", payload });
},
},
// 订阅
subscriptions: {
setup(props) {
const { history, dispatch } = props;
return history.listen(({ pathname }) => {
if (pathname === "/count") {
alert("subscriptions");
dispatch({
type: "asyncAdd",
payload: {
num: 1,
},
});
}
});
},
},
};
export default countStore;
```
### 5. `routes > Count`页面
```javascript
import React from "react";
import { connect } from "dva";
const Count = (props) => {
const { count, add, minus, asyncAdd } = props;
return (
count: {count}
add
minus
asyncAdd(10)}>asyncAdd +10
);
};
const mapStateToProps = (state) => state.count;
const mapDispatchToProps = (dispatch) => ({
add() {
dispatch({
type: "count/add",
});
},
minus() {
dispatch({
type: "count/minus",
});
},
asyncAdd(num) {
dispatch({
type: "count/asyncAdd",
payload: {
num,
},
});
},
});
export default connect(mapStateToProps, mapDispatchToProps)(Count);
```