在
dva中，Reducer 用于处理状态的变化，它接收旧的 state 和 action，然后返回新的 state。下面是使用
dva 中的 Reducer 的示例代码：
```javascript
// models/example.
js
export default {
namespace: 'example',
state: {
data: [],
},
reducers: {
saveData(state, { payload }) {
return {
...state,
data: payload,
};
},
updateData(state, { payload }) {
const { id, newData } = payload;
const newDataList = state.data.map(item => {
if (item.id === id) {
return {
...item,
...newData,
};
}
return item;
});
return {
...state,
data: newDataList,
};
},
},
};
```
在上述示例
中，我们定义了一个 `example` 模型，它具有一个初始状态 `state`，其
中包含一个名为 `data` 的数组。然后，我们在 `reducers` 对象
中定义了两个处理函数：`saveData` 和 `updateData`。
- `saveData` 函数用于存储数据。它接收一个 `payload` 参数，该参数包含要保存的新数据。通过使用对象展开运算符 `...` 来更新状态
中的 `data` 数组，将其替换为新的数据。
- `updateData` 函数用于更新数据。它接收一个 `payload` 参数，该参数包含要更新的数据的 `id` 和新的数据对象 `newData`。我们使用 `map` 方法遍历状态
中的 `data` 数组，找到与给定 `id` 匹配的项，并使用对象展开运算符 `...` 将新数据合并到该项
中。最后，我们返回更新后的 `data` 数组。
在页面组件
中，可以通过 `
dispatch` 方法来触发 Reducer，并传递相应的 action。
```javascript
import
React from '
react';
import { connect } from '
dva';
function ExamplePage({
dispatch, example }) {
const handleSaveData = () => {
const newData = ['data1', 'data2', 'data3'];
dispatch({ type: 'example/saveData', payload: newData });
};
const handleUpdateData = (id, newData) => {
dispatch({ type: 'example/updateData', payload: { id, newData } });
};
return (
<div>
<button onClick={handleSaveData}>Save Data</button>
<button onClick={() => handleUpdateData(1, { name: 'New Name' })}>Update Data</button>
{example.data.map((item, index) => (
<div key={index}>{item}</div>
))}
</div>
);
}
export default connect(({ example }) => ({ example }))(ExamplePage);
```
在上述示例
中，我们在页面组件
中定义了两个按钮点击事件的处理函数：`handleSaveData` 和 `handleUpdateData`。通过调用 `
dispatch` 方法并传入相应的 action，我们可以触发对应的 Reducer。
这就是在
dva 中使用 Reducer 的基本示例。你可以根据实际需求编写更复杂的 Reducer 函数来处理状态的变化。
扫一扫
4440
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
