redux中如何设置动态state
时间: 2024-05-12 12:19:59 浏览: 13
在redux中,可以通过action来设置动态的state。具体的步骤如下:
1. 创建一个action,这个action包含需要更新的state的值。
2. 在reducer中根据action的类型,更新state的值。
3. 在组件中,通过dispatch来触发action,从而更新state的值。
示例代码如下:
```javascript
// 创建action
const updateDataAction = (data) => ({
type: 'UPDATE_DATA',
payload: { data }
})
// reducer中更新state
const reducer = (state = initialState, action) => {
switch (action.type) {
case 'UPDATE_DATA':
return { ...state, data: action.payload.data }
default:
return state
}
}
// 组件中dispatch action
const MyComponent = ({ data, dispatch }) => {
const handleClick = () => {
const newData = fetchData() // 获取新的数据
dispatch(updateDataAction(newData)) // 触发action
}
return (
<div>
<button onClick={handleClick}>更新数据</button>
<p>{data}</p>
</div>
)
}
// connect组件
const mapStateToProps = (state) => ({ data: state.data })
export default connect(mapStateToProps)(MyComponent)
```
在上面的示例代码中,我们创建了一个updateDataAction来更新state中的data值。在reducer中,我们根据action的类型更新state的值。在组件中,我们通过dispatch来触发updateDataAction,从而更新state的值。最后,我们使用connect来连接组件和redux中的state。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)
![](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)