在Redux中替换数组数据可以通过以下步骤实现:
下面是一个示例代码:
const initialState = {
data: []
};
const replaceData = (newData) => {
return {
type: 'REPLACE_DATA',
payload: newData
};
};
const reducer = (state = initialState, action) => {
switch (action.type) {
case 'REPLACE_DATA':
return {
...state,
data: action.payload
};
default:
return state;
}
};
import { connect } from 'react-redux';
import { replaceData } from './actions';
const MyComponent = ({ data, replaceData }) => {
const handleReplaceData = () => {
const newData = [1, 2, 3]; // 新的数组数据
replaceData(newData);
};
return (
<div>
<button onClick={handleReplaceData}>替换数组数据</button>
<ul>
{data.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
</div>
);
};
const mapStateToProps = (state) => {
return {
data: state.data
};
};
const mapDispatchToProps = {
replaceData
};
export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);
这样,当点击按钮时,Redux会触发替换数组数据的action,reducer会根据action的类型更新state中的数组数据,组件会重新渲染显示新的数组数据。
领取专属 10元无门槛券
手把手带您无忧上云