Dvajs 官网实战：写一个列表，包含删除按钮，点删除按钮后延迟 1 秒执行删除。

1.index.js

import dva from 'dva';


// 1. Initialize
const app = dva();
// 2. Plugins
// app.use({});

// 3. Model
app.model(require('./models/products').default);

app.router(require('./router').default)

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

2.router.jsx

import Products from './routes/Products';
import {Route,Router,Switch} from 'dva/router';
function RouterConfig({ history }) {
  return (
    <Router history={history}>
      <Switch>
        <Route path="/" exact component={Products} />
      </Switch>
    </Router>
  );
}

export default RouterConfig;

3.models/products.js

const delay=(time)=>{
  return new Promise(resolve=>setTimeout(resolve,time))
}
export default {
    namespace: 'products',
    state: [
      { name: 'Hello', id: 1 },
      { name: 'world', id: 2 },
    ],
    reducers: {
      del(state, { payload: id }) {
        return state.filter(item => item.id !== id);
      }
     
    },
    effects:{
      *delAfter1Second(action,{put,call}){
        yield call(delay,1000);
        yield put({type:'del',payload:action.payload})
      }
    }
  };

4.routes/Products.jsx

import React from 'react';
import { connect } from 'dva';

const Products = ({ onDelete, products }) => {
  return (
    <div>
      <h2>Todos</h2>
      {/* <ProductList onDelete={onDelete} products={products} /> */}
      <ul>
      {
        products.map(product => (
          <li>
            {product.name}
            <button onClick={() => onDelete(product.id)}>删除</button>
          </li>
        ))
      }
      </ul>
    </div>
  );
};

// export default Products;
export default connect((state) => ({
  products: state.products
}), (dispatch) => ({
  onDelete(id) {
    return dispatch({
      type: 'products/delAfter1Second',
      payload: id,
    });
  }
}))(Products);