React使用Dva构建应用 #19
Description
安装
全局安装dva-cli脚手架，会应有一个新的dva命令，使用它来初始化一个新的dva项目，然后它会自动安装所需的依赖，然后进入该项目文件夹，然后执行npm start启动项目
npm install dva-cli -g dva -v dva new dva-quickstart cd dva-quickstart npm start路由
在routes目录下新建Products.jsx组件
import React from 'react'; // 是帮你连接组件和redux import { connect } from 'dva'; // 这是dispatch和products是来自于props的方法，是connect后提供的 // {dispatch, products}等价于props.dispatch和props.products const Products = ({ dispatch, products }) => { function handleDelete(id, e) { // 获取按钮传递的数据 console.log(id, e) // 获取Model的state的数据 console.log(products) dispatch({ // 触发Model中的action方法 type: 'products/delete', // 这里是传过去Model的数据 payload: { name: "lemon", age: 18, skill: ['ps', 'css', 'js'] }, }); } return (<div> <h2>Dva连接Redux的示例</h2> <button onClick={handleDelete.bind(this, 1)}>连接Model</button> </div>) }; export default connect(({ products }) => ({ products, }))(Products);在上面的路由组件中我们看到connect，由于dva提供了connect 方法，这个 connect就是react-redux的connect方法，帮助我们建立组件和Model之间关系
然后添加路由信息到路由表，编辑router.js
import Products from './routes/Products'; <Route path="/products" exact component={Products} />Model
可以使用Model来封装一个类似于react-redux的数据仓库，来交互组件之间的数据
在models目录下新建products.js文件
export default { namespace: 'products', // state: { // author: "wscats" // }, state:{},//如果这里为空可以在index.js的dva()方法中初始化值 reducers: { 'delete'(state, { payload }) { // state是Model里面存放的state数据 // payload是获取来自于Product.jsx组件的dispatch传过来的payload参数 console.log("触发了redux", state, payload) // 这里是返回新的state数据 return { ...state, ...payload } }, // 可以存放多个action的方法 add(state, { payload }) { } }, };- namespace 表示在全局 state 上的 key
- state 是初始值，在这里是空数组
- reducers 等同于 redux 里的 reducer，接收 action，同步更新 state
然后在index.js文件里面载入它
// 3. Model app.model(require('./models/products').default);如果已经在state里面初始化了数据，那就可以忽略下面这一步，但如果state没有定义值，可以在index.js中的dva()方法中初始化值
// 1. Initialize const app = dva({ initialState: { products: { author: "Eno Yao" } } });