'add item into specific list array redux”翻译为'将项目添加到特定的列表数组redux中”,可以通过以下步骤解决:
1.在redux中定义一个存储列表数组的状态:
const initialState = { listArray: [] }
2.定义一个action creator,用于添加新的项目到列表数组中,该函数接收一个参数(新项目的数据):
export const addItemToListArray = (itemData) => { return { type: 'ADD_ITEM_TO_LIST_ARRAY', payload: itemData } }
3.定义一个reducer函数,用于更新列表数组状态:
const listArrayReducer = (state = initialState, action) => { switch (action.type) { case 'ADD_ITEM_TO_LIST_ARRAY': { // 从action的payload中获取新的项目数据 const newItemData = action.payload; // 复制原数组,并在其中添加新项目 const newListArray = [...state.listArray, newItemData]; // 返回更新后的状态对象 return { ...state, listArray: newListArray } } default: return state; } }
4.将reducer函数加入到store中,并绑定到UI组件的props中:
import { createStore } from 'redux';
const store = createStore(listArrayReducer);
// 绑定store和UI组件 import { connect } from 'react-redux';
const mapStateToProps = (state) => { return { listArray: state.listArray } }
const mapDispatchToProps = (dispatch) => { return { addItem: (itemData) => dispatch(addItemToListArray(itemData)) } }
export default connect(mapStateToProps, mapDispatchToProps)(UIComponent);
5.在UI组件中调用addItem函数,将新项目数据传递给它:
this.props.addItem(newItemData);
这样就可以将新的项目添加到特定的列表数组redux中了。