dva官方实战代码写一个列表，包含删除按钮，点删除按钮后延迟 1 秒执行删除

最新推荐文章于 2024-02-20 16:30:33 发布

柒丶月

最新推荐文章于 2024-02-20 16:30:33 发布

阅读量399

点赞数

本文链接：https://blog.csdn.net/lin1072368472/article/details/108799762

版权

UI

import React, {Component} from 'react';
import { connect } from 'dva'
class List extends Component {
  constructor(props) {
    super(props);
    console.log(props)
  }
  render() {
    return (
      <div>
        {this.props.list.map((item,index) => {
          return (
            <div key={index}>{item} <button onClick={() => this.props.dispatch({type:'list/delAfter1Second',value:index})}>del</button></div>
          )
        })}
      </div>
    )
  }
}

export default connect(({list}) => ({
  list
}))(List)

model

function delay(time) {
  return new Promise((resolve,reject) => {
    setTimeout(() => {
      resolve()
    },1000)
  })
}
export default  {
  namespace: 'list',
  state: [],
  reducers: {
    del(list,action) {
      return list.filter((item,index) => index !==action.value)
    }
  },

  effects: {
    *delAfter1Second(action, { call, put }) {
      yield call(delay, 1000);
      yield put({type:'del',value:action.value});
    },
  },

}

index.js

import dva from 'dva';
import './index.css';
// 1. Initialize
const app = dva({
  initialState: {
    list: [
      '列表1',
      '列表2',
      '列表3',
      '列表4'
    ]
  }
});


// 2. Plugins
// app.use({});

// 3. Model
// app.model(require('./models/example').default);
app.model(require('./models/List').default)
// 4. Router
app.router(require('./router').default);

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

Router.js

import React from 'react';
import { Router, Route, Switch } from 'dva/router';
import IndexPage from './routes/IndexPage';
import Counter from './components/Counter'
import List from './components/List'
function RouterConfig({ history }) {
  return (
    <Router history={history}>
      <Switch>
        <Route path="/" exact component={IndexPage} />
        <Route path="/list" exact component={List} />

      </Switch>
    </Router>
  );
}
export default RouterConfig;