dva的model中从state中获取数据用 select 函数? 是 不是
时间: 2024-03-01 07:55:16 浏览: 19
是。在dva的model中,我们可以使用`select`函数从`state`中获取数据。`select`函数接收一个回调函数作为参数,回调函数的参数是`state`对象,我们可以在回调函数中返回我们需要的数据,从而实现从`state`中获取数据。例如:
```javascript
import { select } from 'dva';
const mapStateToProps = state => {
const data = select(state => state.example.data);
return { data };
}
```
在上面的例子中,我们使用`select`函数从`state`中获取`example`模块中的`data`数据。
相关问题
Dva model中put不仅可以调用reduers 对象中的方法,也可以调用effects里面的函数 是 不是
是的,在Dva的Model中,`put`函数不仅可以调用`reducers`对象中的方法,还可以调用`effects`中的函数。`put`函数用于向 Redux 发出一个新的 action,这个新的 action 可以被`reducers`对象中的方法或者`effects`中的函数所处理。例如:
```javascript
import { delay } from 'redux-saga';
import { call, put } from 'redux-saga/effects';
export default {
namespace: 'myModel',
state: {
data: [],
},
reducers: {
saveData(state, { payload }) {
return { ...state, data: payload };
},
},
effects: {
*fetchData(action, { call, put }) {
try {
const response = yield call(fetch, '/api/data');
const data = yield response.json();
yield put({ type: 'saveData', payload: data });
} catch (error) {
console.log(error);
}
},
},
};
```
在这个例子中,`fetchData`是一个 Effect,它使用`call`函数发起网络请求,并使用`put`函数向 Redux 发出一个新的 action,这个新的 action 是`saveData`函数返回的一个普通 JavaScript 对象,其中包含从服务器获取到的数据。`saveData`函数是`reducers`对象中的方法,用于更新`state`中的`data`属性。这样,在应用中调用`fetchData`函数时,就可以通过向 Redux 发出一个新的 action 来更新`state`中的数据了。
react中的dva使用
Dva是一个基于Redux、React、Redux-saga等技术的轻量级框架,用于简化React应用的开发。Dva提供了一些约定和API,可以帮助我们更快速地开发React应用。以下是在React中使用dva的简单步骤:
1. 创建一个基于dva的React应用
使用dva-cli工具创建一个新的dva项目:
```
$ npm install dva-cli -g
$ dva new myApp
```
2. 引入dva和相关依赖
在src/index.js文件中引入dva和相关依赖:
```javascript
import dva from 'dva';
import './index.css';
// 1. Initialize
const app = dva();
// 2. Plugins
// app.use({});
// 3. Model
// app.model(require('./models/example').default);
// 4. Router
// app.router(require('./router').default);
// 5. Start
app.start('#root');
```
3. 编写dva model
在src/models/目录下创建一个新的model文件,例如user.js:
```javascript
export default {
namespace: 'user',
state: {
list: [],
},
reducers: {
save(state, { payload: { list } }) {
return { ...state, list };
},
},
effects: {
*fetch({ payload }, { call, put }) {
const { data } = yield call(queryUsers);
yield put({
type: 'save',
payload: {
list: data,
},
});
},
},
};
```
这个model定义了一个namespace为'user'的model,包括了state、reducers和effects三个部分。其中reducers用于处理同步操作,effects用于处理异步操作。
4. 注册dva model
在src/index.js文件中注册刚才编写的model:
```javascript
import dva from 'dva';
import './index.css';
import user from './models/user';
// 1. Initialize
const app = dva();
// 2. Plugins
// app.use({});
// 3. Model
app.model(user);
// 4. Router
// app.router(require('./router').default);
// 5. Start
app.start('#root');
```
5. 使用dva connect连接组件和model
在需要使用model的组件中,使用dva提供的connect方法连接组件和model:
```javascript
import { connect } from 'dva';
function Users({ dispatch, users }) {
function handleClick() {
dispatch({
type: 'user/fetch',
});
}
return (
<div>
<h1>List of users</h1>
<button onClick={handleClick}>Fetch users</button>
<ul>
{users.list.map((user, index) => (
<li key={index}>{user.name}</li>
))}
</ul>
</div>
);
}
export default connect(({ user }) => ({ users: user }))(Users);
```
这个组件使用了connect方法连接了'user'命名空间下的state和dispatch到组件的props中。
6. 运行应用
使用npm start命令启动应用:
```
$ cd myApp
$ npm start
```
以上是在React中使用dva的简单步骤,具体使用可以参照dva官方文档和示例。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)