Tengo este estado, módulos reductores, el objetivo de hacer esto es crear 2 estados que son relativos entre sí, en la primera acción (cuadro de agregar) agrego un elemento al primer cuadro de estado y también creé una matriz vacía en el otro hijos de estado, que se llenarán con el elemento una vez que se llame a la segunda función (bajo demanda). el problema es que no puedo enviar elementos cuando se llama a la segunda función en la matriz vacía que es el resultado de llamar a la primera función, ¿podría ayudarme con la sintaxis?

 export default (state, action) => { switch (action.type) { case ADD_BOX: return { ...state, boxes: [...state.boxes, { id: action.id, index: action.index }], childern: [...state.childern, []], }; case ADD_CHILD: return { // push data in to already existing array !! ...state, ...state.childern[action.index[{ id: action.payload }]], }; default: return state; } };

 // State Module const AppState = (props) => { const initialState = { boxes: [], childern: [], }; const [state, dispatch] = useReducer(AppReducer, initialState); console.log(state); const AddBox = (id, i) => { dispatch({ type: ADD_BOX, id: id, index: i, }); }; const AddBoxChild = (id, i) => { dispatch({ type: ADD_CHILD, payload: id, index: i, }); }; return ( <appContext.Provider value={{ boxes: state.boxes, childern: state.childern, AddBox, AddBoxChild, }} > {props.children} </appContext.Provider> ); }; export default AppState;